jQuery 延迟问题

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") 延迟一两秒。我不想延迟滑动。

有什么想法吗？

Answer 1

delay() 默认作用于 fx 队列。 removeClass 不会添加到任何队列，因此在不进行一些更改的情况下不会受到 delay() 的影响。

您可以:

1. 手动将 removeClass 调用添加到 fx 队列
2. 改用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)。