3

我不得不想象这是 javascript/jQuery 的一个常见用例,所以如果它在网站上的其他地方,请原谅我,我搜索它并找不到这个基本用例。

我有一个可见的 div (A)。悬停该 div 会显示其他一些 div (B & C)。悬停任何这些 div(A、B 或 C)将隐藏两个显示的 div(B 和 C)。

很简单,对吧?问题在于,当您快速连续多次悬停和取消悬停时,这种简单的行为会导致丑陋,因为所有事件都会叠加,然后它就像手风琴一样有一段时间。

我尝试将 typewatch 函数带入方程:

var typewatch = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      }  
    })();

但我想我无法正确使用它(也许我必须调用一个调用 typewatch 本身的自定义切换函数,或者其他什么?)。

为了便于理解,这里是一个确切案例的 jsfiddle:http: //jsfiddle.net/tchalvakspam/KG3P9/7/

但总的来说,我怎样才能捕捉多个事件而只尊重最新的事件呢?

4

2 回答 2

2

我使用 e.preventDefault() 和 jQuery 事件来阻止事件向上传播。

于 2011-06-24T18:50:34.807 回答
1

这实际上是曾经困扰我很多的事情。在您制作动画之前,调用$.stop()它将冻结其轨道中的任何当前动画,并接受您给它的新目标。

$("#container")
  .mouseenter(
    function(){
     $(".panels", this).stop(true, true).slideDown(); 
    })
  .mouseleave(
    function(){
     $(".panels", this).stop(true, true).slideUp();
    }
  );

这遵循 jQuery API 中为$.stop()方法本身提供的文档,因为它们提供了一个类似的示例,使用单个图像。

演示:http: //jsbin.com/adeqef/2/edit

于 2011-06-24T19:12:20.947 回答