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

用jquery显示和隐藏一个框

2 个答案: