事件处理- jQuery在下一次鼠标悬停之前完成幻灯片

Question

我有一个span标签列表，它触发一个mouseover事件，该事件更新src属性并滑动下一个图像。我遇到的问题是，如果用户快速连续滚动多个控件，那么动画就会变得非常跳跃，看起来很糟糕。下面是我当前的代码:

$("#list .client").mouseover(function(){
    var imgSrc = $(this).attr('rel');
    var image1 = $("#clientImage1");
    var image2 = $("#clientImage2");
    if(image1.is(":visible")){
        image2.attr('src', imgSrc); 
        image2.stop(true, true).show("slide", { direction: "down" }, 400);  
        image1.stop(true, true).hide("slide", { direction: "up" }, 400);
        //image1.hide();
    }
    else{
        image1.attr('src', imgSrc);
        image1.stop(true, true).show("slide", { direction: "down" }, 400);
        image2.stop(true, true).hide("slide", { direction: "up" }, 400);
    }
    //console.log("Img Source: " + imgSrc);
});

我想做的是添加一个时间延迟，如果目前有一个动画仍在进行中。我不想排队的功能，只是执行最后一个调用上最后一个鼠标悬停。我认为它与SetTimeout有关，但我对如何实现这一点有点困惑。

任何想法?

谢谢!

编辑:

非常感谢你的帮助，终于得到了它与hoverIntent工作!工作代码:

$(document).ready(function(){   
    $("#clientImage2").hide();  
    $("#list .client").hoverIntent(config); 
});

var config = {    
     over: slideShow, // function = onMouseOver callback (REQUIRED)    
     timeout: 600, // number = milliseconds delay before onMouseOut    
     out: doNothing // function = onMouseOut callback (REQUIRED)    
};
function slideShow() {
    var imgSrc = $(this).attr('rel');
    var image1 = $("#clientImage1");
    var image2 = $("#clientImage2");
    if(image1.is(":visible")){
      image2.attr('src', imgSrc); 
      image2.stop(true, true).show("slide", { direction: "down" }, 600);  
      image1.stop(true, true).hide("slide", { direction: "up" }, 600);
      }
    else{
      image1.attr('src', imgSrc);
      image1.stop(true, true).show("slide", { direction: "down" }, 600);
      image2.stop(true, true).hide("slide", { direction: "up" }, 600);
      }
}
function doNothing(){}

Answer 1

通常当你做动画时，你想要停止之前的动画，所以在你做动画之前，你可以在动画之前插入一个。stop(true, true)(比如$("#myelement").stop(true,true).fadeIn())。第一个'true'清除元素的动画队列，第二个'true'停止当前正在运行的动画

Answer 2

你可以做两件事。

首先，你可以使用hoverIntent插件，它会忽略快速鼠标悬停，或者你可以取消绑定鼠标悬停动作，直到动画完成。

http://cherne.net/brian/resources/jquery.hoverIntent.html

编辑:

使用unbind:

$("#list .client").mouseover(function(){
   $("#list .client").unbind('mouseover');
}

将完成所有这些工作的函数命名为命名函数，而不是匿名函数。然后，当图像显示的动画完成。重新绑定鼠标悬停函数，就像你在第一个地方绑定它一样

function slideShow() { 
$("#list .client").unbind('mouseover');
 var imgSrc = $(this).attr('rel');
var image1 = $("#clientImage1");
var image2 = $("#clientImage2");
  if(image1.is(":visible")){
      image2.attr('src', imgSrc); 
      image2.stop(true, true).show("slide", { direction: "down" }, 400, function() {
         $("#list .client").mouseover(slideShow);
      });  
              image1.stop(true, true).hide("slide", { direction: "up" }, 400);
              //image1.hide();
      }
      else{
          image1.attr('src', imgSrc);
          image1.stop(true, true).show("slide", { direction: "down" }, 400);
          image2.stop(true, true).hide("slide", { direction: "up" }, 400);
    }
    // binding
    $("#list .client").mouseover(slideShow);