Mouseout 和 Mouseenter jquery 函数

发布于 2024-12-13 22:32:31 字数 434 浏览 4 评论 0原文

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

我该如何解决我的问题？

原文

I used the jQuery mouseout and mouseenter function. But is not working good. Because when you go fast over the items. I get verry crazy effects. I used this code:

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

How can i fix my problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴情换悲伤 2024-12-20 22:32:31

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

I added in .stop() just before the animation which will stop the animation in place and should stop the jumping.

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

回复收藏 0 原文

扛起拖把扫天下 2024-12-20 22:32:31

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

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

您可以手动执行此操作，也可以在实现中使用 jQuery悬停意图插件这非常好并且易于使用。

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

回复收藏 0 原文

神妖 2024-12-20 22:32:31

将某个变量设置为互斥体，例如：

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

set some variable as mutex, like:

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

回复收藏 0 原文

九八野马 2024-12-20 22:32:31

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

.mouseover() and .mouseout() give strange results because mouseover() fires more than once while your mouse is still inside the element. Simple mouse movement will trigger it again & again.

.mouseenter() and .mouseleave() are better because they are only supposed to fire one time upon entering or leaving the element. However, they still do not seem to function as well as .hover() which combines them together into one method.

Also adding a .stop() will stop the current animation before starting a new one. .stop(true, false) will clear anything in the animation queue and not allow the current animation to complete.

$('.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/

回复收藏 0 原文

~没有更多了~