jQuery: как правильно использовать .stop () функция?
На этой странице:
http://www.arvag.net/old/smsbox.de/
когда Вы нависаете над "Informationen" и "Über ins", он показывает подменю. При отодвигании мыши она скрывается. Обычно, у меня есть проблема с jQuery, ставящим в очередь каждое парение, которое я делаю, и затем это просто продолжает анимировать все те парения. Я пытался реализовать stop(), но я просто не могу заставить это работать правильно.
Это - код, который я использую:
Спасибо!
2 ответа
Вам нужно .stop () в обоих направлениях, чтобы остановить очередь, в противном случае часть mouseenter при наведении курсора будет продолжать ставить в очередь свои анимации. Кроме того, поскольку вы переключаетесь, вы можете сократить его следующим образом:
$('#nav_menu > .center > ul > li').hover(function() {
$(this).children('ul').stop(true,true).slideToggle('slow');
}).click(function(){
return false;
});
Вам понадобится .stop () в элементах ul , поскольку это то, что анимируется. Попробуйте это, вы увидите, что это все еще немного неуклюже, потому что оно сбрасывает анимацию, а не ставит в очередь. Альтернативой является предотвращение очереди, например, с помощью селекторов : visible и : hidden ... Я предпочитаю этот эффект, но на ваше усмотрение :)
$('#nav_menu > .center > ul > li').hover(function() {
$(this).children('ul:hidden').slideDown('slow');
}, function() {
$(this).children('ul:visible').slideUp('slow');
}).click(function(){
return false;
});
Я полагаю, что вам нужно поставить stop(true,true) на часть hover-over также. Тогда она прерывает другие анимации, происходящие в данный момент, чтобы выполнить свою собственную, если я не ошибаюсь.
$('#nav_menu > .center > ul > li').hover(function() {
$(this).stop(true,true).children('ul').slideToggle('slow');
},function(){
$(this).stop(true,true).children('ul').slideToggle('slow');
}).click(function(){
return false;
});