Mouseout 和 Mouseenter jquery 函数答案

【问题标题】：Mouseout and Mouseenter jquery functionMouseout 和 Mouseenter jquery 函数
【发布时间】：2011-12-23 23:33:43
【问题描述】：

我使用了 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 });
    });

我该如何解决我的问题？

【问题讨论】：

您说您使用了mouseout 和mouseenter，但您的代码包含mouseout 和mouseover。

标签： javascript jquery mouseover mouseout

【解决方案1】：

.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/

【讨论】：

【解决方案2】：

我在动画之前添加了.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 });
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

问题最初不是mouseout 或mouseover 事件。他们正在按照他们应该工作的方式工作。这意味着即使您将鼠标悬停在元素上仅1ms 它也可以工作。

此问题的解决方案是延迟操作。您应该等待一定的毫秒数才能执行您想要的操作。

您可以手动完成，也可以只使用jQuery hover intent plug，因为它非常好用且易于使用。

最好不要使用mouseout 或mouseover 事件并使用jQuery .hover()（如果您使用插件.hoverIntent() 以获得更干净和可读的代码。

【讨论】：