Mouseout and Mouseenter jquery function

Mouseout and Mouseenter jquery function

本文关键字：function jquery Mouseenter and Mouseout      更新时间：2023-09-26

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

我该如何解决我的问题？

我在.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 });
});

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

这个问题的解决方案是推迟行动。你应该等待一定的毫秒来做你想发生的事情。

你可以手动完成，也可以使用jQuery悬停意图插件，它实现了这一点，非常好用。

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

将一些变量设置为互斥对象，如：

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

.mouseover()和.mouseout()会产生奇怪的结果，因为当鼠标仍在元素内时，mouseover()会多次触发。简单的鼠标移动将再次触发它&再一次

CCD_ 12和CCD_。然而，它们的功能似乎仍然不如.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/

相关文章：