Вход

Просмотр полной версии : click и hover

ureech
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
31.10.2015, 04:29
Может подскажите как заставить работать?:)
ureech
31.10.2015, 05:32
Так не работает, в том то и дело.Вернее работает, но через раз.Кликнул-сработало,ещё раз кликнул -0.
ureech
31.10.2015, 06:29
Надо на каждый клик.А то есть несколько ссылок на одной стр. и анимация срабатывает через ссылку.
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>
............


Щёлкаю на ссылку, открывается див таба, в нём срабатывает анимация,но что бы сработала анимация на следующем табе приходится два раза кликнуть. При первом не срабатывает.
ureech
31.10.2015, 19:57
Сори,ошибся.Там не id="tab-in_1, а class="tab-in_1", если про это.
ureech
31.10.2015, 20:30
Да, класс у всех этих дивов один, а дивов по одному в каждом табе.
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
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('fadeIn Left')
}
);
}
);
то в диве анимация работает как надо, а вот в 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 то справимся :)