2012-02-15 82 views
0

我有一个div容器,它粘在页面的底部。当鼠标移出div时,我想让div在3秒钟后下沉。当鼠标移过div时,我想让div上升到原来的位置。问题在于,鼠标快速移出div时,div始终向上移动。使用jquery滚动div setTimeout&mouseenter&mouseleave

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); 
    } 
}); 

回答

0

我已经成功地在我想要的动画前叠加一个空动画,而不是使用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股利仍然站在你的描述猜测。然后,当鼠标第一次离开时,它应该下沉。之后,当鼠标再次回来时,它应该回到原来的位置。我认为这将接近于做到这一点。

HTH

+0

对不起,它仍然无法正常工作。我不希望div在页面加载后移动。它应该只在Mouseleave事件触发时上移。如果没有计时器变量,当鼠标输入触发时div始终向上移动。 – Vaeianor 2012-02-15 21:31:59

+0

我修改了代码以使其更加完整。看看这是否会触发任何想法。 – 2012-02-15 22:12:23

相关问题