jQuery Delay Вопрос

Question

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".module .caption").hide(); 
    $(".module").hover(function() { 
    $(this).find(".caption").slideDown().end().siblings('.module').addClass('under'); 
    },function() { 
    $(this).find(".caption").slideUp().end().siblings('.module').removeClass('under').delay(10000); 
    }); 
}); 
</script> 

Это отлично работает, за исключением того, что .delay не работает, является ли мой синтаксис неправильным? Я просто пытаюсь добиться того, чтобы .removeClass («под») задерживался на секунду или два, когда мышь не зависает. Я не хочу задерживать слайд-эффект.

Любые идеи?

Answer 1

delay() работает по очереди fx по умолчанию. removeClass не добавляется ни в какие очереди, поэтому не может быть изменен delay() без каких-либо изменений.

Вы можете:

1. Добавить removeClass вызов в fx очереди вручную
2. Использование setTimeout вместо.

Решение 1 Обратите внимание на Перестановка delay в цепи JQuery, как хорошо!:

$(this).find(".caption").slideUp().end().siblings('.module').delay(1000).queue(function() { 
    $(this).removeClass('under').dequeue(); // dequeue is IMPORTANT! 
}); 

Решение 2:

$(".module").hover(function() { 
    $(this).find(".caption").slideDown().end().siblings('.module').addClass('under'); 
    },function() { 
    var self = $(this).find(".caption").slideUp().end().siblings('.module'); 

    setTimeout(function() { 
     self.removeClass('under'); 
    }, 1000); 
    }); 

Обратите внимание, что оба решения будут давать странные (но разные) эффекты, если кто-то мышь за кадром/Диффузоры несколько раз. Чтобы решить проблемы с # 1, добавьте .stop().clearQueue() в цепочку с помощью мыши. Чтобы решить # 2, сохраните ссылку на таймаут и clearTimeout(theVariable) на мыши.