Mouseout和Mouseenter jQuery函数

Question

我使用了jQuery mouseout和mouseenter函数。 但是效果不好。 因为当您快速浏览项目时。 我得到疯狂的效果。 我使用以下代码：

$('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });

我该如何解决我的问题？

Answer 1

我在动画之前添加了.stop() ，它将在适当位置停止动画并应停止跳跃。

$('.controlNav li').mouseover(function() {
    $('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
    $('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});

Answer 2

最初的问题不是出mouseout或mouseover事件。 他们正在努力工作。 这意味着即使您将鼠标悬停在元素上仅1ms它也将起作用。

解决此问题的方法是延迟操作。 您应该等待一定的毫秒数才能完成所需的操作。

您可以手动执行此操作，也可以只使用jQuery悬浮意图插件实现该非常好用的操作。

最好不要使用mouseout或mouseover事件，而应使用jQuery .hover() （如果您使用.hoverIntent()的插件获取更清晰易读的代码）。

Answer 3

.mouseover()和.mouseout()给出奇怪的结果，因为当鼠标仍位于元素内时， mouseover()会触发多次。 简单的鼠标移动将一次又一次触发它。

.mouseenter()和.mouseleave()更好，因为它们只能在进入或离开元素时触发一次。 但是，它们似乎仍不如.hover()那样好，后者将它们组合为一个方法。

另外，添加.stop()将在开始新动画之前停止当前动画。 .stop(true, false)将清除动画队列中的所有内容，并且不允许当前动画完成。

$('.controlNav li').hover(
    function() {
        $('.hover', this).css({ display: 'block' }).stop(true, false).animate({ top: -73, opacity: 1 }, 450, 'swing' );
},
    function() {
        $('.hover', this).css({ display: 'none' }).stop(true, false).animate({ top: -60, opacity: 0 });
});

http://api.jquery.com/hover/

http://api.jquery.com/stop/

Answer 4

将一些变量设置为互斥体，例如：

var isActive = false;
('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        if(isActive) return false;
        isActivce = true;
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });