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

你可以做两件事。

首先，你应该使用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);

Answer 2

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

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

谢谢！

2 个答案: