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（“under”）延迟一两秒。我不想延迟slideUp。

有什么想法吗？

Answer 1

默认情况下，

delay()适用于fx队列。 removeClass未添加到任何队列中，因此delay()不会在没有更改的情况下受到影响。

你可以：

手动将removeClass电话添加到fx队列
请改用setTimeout。

解决方案1 请注意jQuery链中delay的重新调整！：

$(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)。

jQuery延迟问题

1 个答案: