jQuery在下一次鼠标悬停前完成幻灯片

我有一个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有关，但对于如何实现这一点，我有点困惑

有什么想法吗

谢谢 编辑：

非常感谢你的帮助，终于让它工作了！ 工作守则：

$(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(){}

你可以做两件事

首先，您可以使用hoverIntent插件，该插件将忽略快速鼠标悬停，或者您可以在动画完成之前解除鼠标悬停操作的绑定

编辑：

按如下方式使用解除绑定：

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

使执行所有这些操作的函数成为命名函数，而不是匿名函数。然后，当图像显示动画完成时。重新绑定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);

---

通常在制作动画时，您希望停止以前的动画，因此在制作动画之前，您可以在动画之前插入.stop（true，true）（例如

$（“#myelement”）.stop（true，true）.fadeIn（）

）。第一个“true”清除元素的动画队列，第二个“true”停止当前正在运行的动画。

我有一个HoverIntent游戏，但运气不好。你能给我举一个例子，说明如何使用我的代码解除绑定，然后再重新绑定吗？抱歉，我是jquery的新手。请检查我的编辑。对不起，如果有一点小错误，但这就是我的想法。