用jquery显示和隐藏一个框

Question

我有一个绝对定位的新闻框。当一个用户鼠标在它上面时，我创建了一个脚本来为它的底部值创建动画。所以就是这样。

(function(){ 
    var newsbox = $('div#news_div'); 

    newsbox.on('mouseover',function(){ 
     $(this).animate({'bottom':160},{duration:500}); 
     }); 
    newsbox.on('mouseleave',function(){ 
     $(this).delay(20000).animate({'bottom':55},{duration:500}); 
     }); 
    })(); 

所以当我一遍又一遍地将鼠标放在它上面时，它显示出不寻常的行为。你能否给我建议。

Answer 1

使用stop()方法在开始下一个动画之前停止任何当前播放的动画。

(function(){ 
    var newsbox = $('div#news_div'); 

    newsbox.on('mouseover',function(){ 
    $(this).stop().animate({'bottom':160},{duration:500}); 
    }); 
    newsbox.on('mouseleave',function(){ 
    $(this).stop().delay(20000).animate({'bottom':55},{duration:500}); 
    }); 
})(); 

Answer 2

尝试将停止你演示这之前会停止，如果你很快鼠标悬停在链接

(function(){ 
    var newsbox = $('div#news_div'); 

    newsbox.on('mouseover',function(){ 
     $(this).stop().animate({'bottom':160},{duration:500}); 
     }); 
    newsbox.on('mouseleave',function(){ 
     $(this).delay(20000).stop().animate({'bottom':55},{duration:500}); 
     }); 
    })();