Форум

ureech · #1 (**permalink**) 31.10.2015, 03:20

Здравствуйте. Подскажите почему так работает

$('.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");
}
);

ureech · #2 (**permalink**) 31.10.2015, 04:29

Может подскажите как заставить работать?

ureech · #3 (**permalink**) 31.10.2015, 05:32

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

ureech · #4 (**permalink**) 31.10.2015, 06:29

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

ureech · #5 (**permalink**) 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>
............

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

ureech · #6 (**permalink**) 31.10.2015, 19:57

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

ureech · #7 (**permalink**) 31.10.2015, 20:30

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

ureech · #8 (**permalink**) 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');
});

рони · #9 (**permalink**) 01.11.2015, 11:16

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 · #10 (**permalink**) 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 анимация вообще не работает.

Форум

Справочник

Discord чат

Курсы javascript