Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   click и hover (https://javascript.ru/forum/events/59179-click-i-hover.html)

ureech 31.10.2015 03:20
click и hover
 
Здравствуйте. Подскажите почему так работает
$('.tab').hover( function() { 	
$(".tab-in_1").addClass("zoomIn");
},
function() { 	
$(".tab-in_1").removeClass("zoomIn");
}
);
, а так нет
$('.tab').on('click', function() { 	
$(".tab-in_1").addClass("zoomIn");
},
function() { 	
$(".tab-in_1").removeClass("zoomIn");
}
);

Rise 31.10.2015 03:51
ureech, потому что hover и on разные функции, соответственно имеют разные параметры.

ureech 31.10.2015 04:29
Может подскажите как заставить работать?:)

Rise 31.10.2015 04:44
ureech,
$('.tab').on('click', function() { 
	$('.tab-in_1').toggleClass('zoomIn');
});

ureech 31.10.2015 05:32
Так не работает, в том то и дело.Вернее работает, но через раз.Кликнул-сработало,ещё раз кликнул -0.

Rise 31.10.2015 05:44
ureech, а как надо?

ureech 31.10.2015 06:29
Надо на каждый клик.А то есть несколько ссылок на одной стр. и анимация срабатывает через ссылку.

Rise 31.10.2015 08:30
ureech, пример html надо так не понятно.

ureech 31.10.2015 13:46
Есть 4 ссылки для табов
<li><a class="tab" href="#tab-mus">Музыка</a></li>
		 <li><a class="tab"  href="#tab-bis">Бизнесс</a></li>
		 <li><a class="tab" href="#tab-pol">Политика</a></li>		 
		 <li><a class="tab" href="#tab-mov">Кино</a></li>

<div id="tab-mus" >
<div id="tab-in_1 animated" ></div>
</div>
............

Щёлкаю на ссылку, открывается див таба, в нём срабатывает анимация,но что бы сработала анимация на следующем табе приходится два раза кликнуть. При первом не срабатывает.

Rise 31.10.2015 17:04
ureech, div на все табы один судя по коду...

ureech 31.10.2015 19:57
Сори,ошибся.Там не id="tab-in_1, а class="tab-in_1", если про это.

Rise 31.10.2015 20:06
ureech, про это class="tab-in_?"

ureech 31.10.2015 20:30
Да, класс у всех этих дивов один, а дивов по одному в каждом табе.

Rise 31.10.2015 20:36
ureech, ну так напиши все дивы и js код как пишешь...

ureech 31.10.2015 20:55 
<li><a class="tab" href="#tab-mus">Музыка</a></li>
		 <li><a class="tab"  href="#tab-bis">Бизнесс</a></li>
		 <li><a class="tab" href="#tab-pol">Политика</a></li>		 
		 <li><a class="tab" href="#tab-mov">Кино</a></li>

<div id="tab-mus" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-pol" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-mov" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-bis" >
<div class="tab-in_1 animated" ></div>
</div>


$('.tab').on('click', function() {
    $('.tab-in_1').toggleClass('zoomIn');
});

рони 01.11.2015 11:16
Открывашка 231
 
ureech,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tab-in_1.zoomIn  {
    height: 100px;
    background: #FFCC00;
    display: block;
  }
  .animated {
      transition: all 1s ease-in-out;
  }
  .tab-in_1  {
    height: 0px;
     overflow: hidden;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
   $(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn')
         }
       );
     }
   );
  </script>
</head>

<body>
  <ul>
    <li>
      <a class="tab" href="#tab-mus">Музыка</a>
    </li>

    <li>
      <a class="tab" href="#tab-bis">Бизнесс</a>
    </li>

    <li>
      <a class="tab" href="#tab-pol">Политика</a>
    </li>

    <li>
      <a class="tab" href="#tab-mov">Кино</a>
    </li>
  </ul>

  <div id="tab-mus">
    <div class="tab-in_1 animated">
      Музыка
    </div>
  </div>

  <div id="tab-pol">
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>

  <div id="tab-mov">
    <div class="tab-in_1 animated">
      Кино
    </div>
  </div>

  <div id="tab-bis">
    <div class="tab-in_1 animated">
      Бизнесс
    </div>
  </div>
</body>
</html>

ureech 01.11.2015 13:49
Большое спасибо,рони, работает. Теперь такой вопрос. Если я добавляю в таб, ещё один эллемент с другим класом 
<div id="tab-pol">
<img class="tab-img animated" src="" />
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>


и дописываю в код 
$(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn');
           $('.tab-img').not($('.tab-img', id).toggleClass('fadeInLeft')).removeClass('fadeInLeft')
         }
       );
     }
   );

то в диве анимация работает как надо, а вот в img срабатывает только по одному разу в каждом табе.Повтор требует перезагрузки страницы.
Пробовал сделать так
<div id="tab-pol">
<img class="tab-anim fadeInLeft" src="" />
    <div class="tab-in_1 tab-anim zoomIn">
      Политика
    </div>
  </div>



$(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-anim').not($('.tab-anim', id).toggleClass('animated')).removeClass('animated')
         }
       );
     }
   );

Но так в img анимация вообще не работает.

рони 01.11.2015 14:38
ureech,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tab-in_1.zoomIn  {
    height: 100px;
    background: #FFCC00;

  }
  .animated {
      transition: all 1s ease-in-out;
  }
  .tab-in_1  {
    height: 0px;
    overflow: hidden;
  }
 .tab-img {
   margin-left: -400px;
  }
 .tab-img.animated {
      transition: all 1s ease-in-out;
   }

.tab-img.zoomIn  {
     margin-left: 0px;
  }
  body>div{
    position: absolute;
    top:150px;
  }
  body{
    position: relative;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
   $(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1, .tab-img').not($('.tab-in_1, .tab-img', id).toggleClass('zoomIn')).removeClass('zoomIn')
         }
       );
     }
   );
  </script>
</head>

<body>
  <ul>
    <li>
      <a class="tab" href="#tab-mus">Музыка</a>
    </li>

    <li>
      <a class="tab" href="#tab-bis">Бизнесс</a>
    </li>

    <li>
      <a class="tab" href="#tab-pol">Политика</a>
    </li>

    <li>
      <a class="tab" href="#tab-mov">Кино</a>
    </li>
  </ul>

  <div id="tab-mus"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Музыка
    </div>
  </div>

  <div id="tab-pol"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>

  <div id="tab-mov"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Кино
    </div>
  </div>

  <div id="tab-bis"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Бизнесс
    </div>
  </div>
</body>
</html>

ureech 01.11.2015 14:53
Это всё хорошо конечно, но дело в том, что класс самой анимации разный у дива и img :)

рони 01.11.2015 15:38
ureech,
изучайте css, тут достаточно менять класс только у самого блока tab-mus и т.д. -- вы меняите классы и скрываите ваше css, поэтому далее сами, в скриптах больше ничего не понадобится добавлять, только селекторы уточнить.

ureech 01.11.2015 16:07
Понятно, спасибо,с css то справимся :)


Часовой пояс GMT +3, время: 16:40.