JQuery Задержка Вопрос - PullRequest
Новая
       12

JQuery Задержка Вопрос

2 голосов
/ 06 июня 2010 
<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 ("under") задерживался на секунду или две, когда мышь не зависает. Я не хочу откладывать слайд.

Есть идеи?

1 Ответ

3 голосов
/ 06 июня 2010

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).

...