使用jquery setTimeout & 滚动div鼠标输入&鼠标离开

Question

我有一个 div 容器，它粘在页面底部。当鼠标移出div时，我希望div在3秒后下沉。当鼠标移到 div 上时，我希望 div 上升到其原始位置。问题是，当鼠标快速移出 div 时，div 会不断向上移向页面顶部。

   var timer = null;
   var moving_distance = $("#scroller").height()-($(window).height()-$("#slideshow").height());
   $("#scroller").mouseenter(function(event){

    if(timer)
    {
     clearTimeout(timer);

         $("#scroller").animate({top:'-='+moving_distance},1000);

    }

}).mouseleave(function(event){

    if(!timer){

    timer = setTimeout(function(){

        $("#scroller").animate({top:'+='+moving_distance},1000);
    },3000);
    }
}); 

Answer 1

我已经成功地将空动画堆叠在我想要的动画前面，而不是使用 setTimeout。

例如，

 var moving_distance = $("#scroller").height()-($(window).height()-$("#slideshow").height()); 
 var firstEnter = true;
 $("#scroller").mouseenter(function(event){ 
    if (firstEnter)
        firstEnter = false;
    else {
        $("#scroller").stop();
        $("#scroller").animate({top:'+=0', 3000);
        $('#scroller').animate({top:'-='+$('#scroller').top()), 1000);
    }
}).mouseleave(function(event){ 
    $('#scroller').stop();
    $("#scroller").animate({top:'+=0', 3000);
    $('#scroller').animate({top:'+='+moving_distance), 1000);
});  

我从您的描述中猜测您希望 div 保持静止，直到鼠标移动到 div 中。然后，当老鼠第一次离开时，它应该下沉。之后，当鼠标再次返回时，它应该返回到原来的位置。我认为这将接近实现这一目标。

华泰