JQuery задержка (), ломая анимацию - PullRequest
Новая
       13

JQuery задержка (), ломая анимацию

0 голосов
/ 02 февраля 2011

У меня есть выпадающее меню, которое работает очень хорошо, но я хочу, чтобы оно оставалось выпадающим, так сказать, в течение 500 мс после того, как пользователь зависает из коробки.

Я пытался использовать .delay(500), но анимациякажется застревает и меню не исчезает.

Вот мой код. 

$(function(){
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).delay(500).hide(0);
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");

});

1 Ответ

3 голосов
/ 02 февраля 2011

Вы используете эту задержку, как было бы установлено время.Для того, что вы делаете, я бы предложил просто использовать setTimeout.

Кстати, вы скрываете его через 500 мс, потому что пользователь может захотеть вернуться к нему, не так ли?Если да, вам нужно подумать об отмене функции сокрытия, если пользователь возвращается к ней.Для этого запомните setTimeout, используя 

var myTimeOut = setTimeout(function, 500); clearTimeout(myTimeOut);

Мое полное предложение для вас: 

$(function(){
var myTimeout = null;
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    if (myTimeout) clearTimeout(myTimeout);
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
     var _thisRef = $(this);
     _thisRef.removeClass("hover");
     myTimeout = setTimeout(function() {
        _thisRef.find("ul:first").hide();
    }, 500);
});

$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");
});
...