【问题标题】:Is there a way to cancel jQuery's hover event while it is happening?有没有办法在它发生时取消 jQuery 的悬停事件?
【发布时间】:2011-10-31 15:53:54
【问题描述】:

我正在使用 jQuery 悬停事件使元素“发光”(不透明度从 0.7 变为 1),然后在鼠标离开时“发光”。这很好,除非您不小心将鼠标悬停在元素上几次或多次。然后,元素将开始闪烁(“发光”和“不发光”)的次数与鼠标经过的次数一样多。

这不仅丑陋,而且还意味着任何其他需要运行的 jQuery .animate() 事件必须等到这些连续的闪烁完成。一个例子可以在这里找到:http://www.rootsoftllc.com/accounts/

有没有办法告诉 jQuery 悬停事件它只能运行一次,然后它必须等到它完成之后才能运行,除了更多的鼠标事件?

【问题讨论】:

    标签: jquery stack hover jquery-animate opacity


    【解决方案1】:

    是的,实际上很简单。在使用.animate() 启动动画之前,将.stop() 放入其中以停止队列中的任何其他动画。

    在此处阅读:

    The jquery online documentation on .stop()

    【讨论】:

      【解决方案2】:

      您可以使用.stop(true, true) 来停止和清除动画队列,如下所示:

      $('.window').hover(function() {
          $(this).stop(true, true).animate({opacity: 1}, 500);
      }, function() {
          $(this).stop(true, true).animate({opacity: 0.7}, 500);
      });
      

      【讨论】:

        【解决方案3】:

        在 jQuery 中,您可以为每个动画赋予它自己的队列。我建议你给悬停效果一个自己的队列,这样它就不会干扰其他动画。然后,您可以检查鼠标在元素内的时间。如果它没有足够长的时间来完成动画,请使用.stop() 提前停止动画,然后将动画快速返回到它应该在的位置。

        【讨论】:

        • 您如何衡量您所说的这些时间范围?
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2023-03-08
        • 1970-01-01
        • 1970-01-01
        • 2016-01-21
        • 1970-01-01
        • 1970-01-01
        • 2010-10-27
        相关资源
        最近更新 更多