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");
}
);
|
Может подскажите как заставить работать?:)
|
Так не работает, в том то и дело.Вернее работает, но через раз.Кликнул-сработало,ещё раз кликнул -0.
|
Надо на каждый клик.А то есть несколько ссылок на одной стр. и анимация срабатывает через ссылку.
|
Есть 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> ............ Щёлкаю на ссылку, открывается див таба, в нём срабатывает анимация,но что бы сработала анимация на следующем табе приходится два раза кликнуть. При первом не срабатывает. |
Сори,ошибся.Там не id="tab-in_1, а class="tab-in_1", если про это.
|
Да, класс у всех этих дивов один, а дивов по одному в каждом табе.
|
<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');
});
|
Открывашка 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>
|
Большое спасибо,рони, работает. Теперь такой вопрос. Если я добавляю в таб, ещё один эллемент с другим класом
<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 анимация вообще не работает. |
| Часовой пояс GMT +3, время: 09:47. |