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 hover intent plug实现这个非常好用且易于使用。

最好不要使用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 });
    });

Mouseout和Mouseenter jquery函数

4 个答案: