Hover/mouseenter 事件触发 jQuery UI 的“动画”；反复地

发布于 2024-11-09 10:04:55 字数 1663 浏览 2 评论 0原文

所以我有一个导航，我使用 jQuery 的 UI 动画使列表项向下滑动到视图之外，更改颜色，然后向上滑动，以不同的颜色显示按钮。

我遇到的问题是，每当我将鼠标悬停在列表项上时，悬停事件就会不断触发，直到鼠标离开。

更奇怪的是，无论鼠标是否确实离开了列表项，mouseleave 事件似乎都会在悬停事件之后立即触发。无论我使用悬停还是鼠标输入，都会发生这种情况。

这是我所拥有的： HTML:

<nav>
    <ul>
        <a href="index.html"><li>Home</li></a>
        <a href="services.html"><li>Services</li></a>
        <a href="portfolio.html"><li>Portfolio</li></a>
        <a href="contact.php"><li>Contact</li></a>
        <a href="about.html"><li>About</li></a>
    </ul>
</nav>

jQuery:

$("nav li").mouseenter(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','orange');$(this).css('color','#fff');});
        $(this).animate({bottom:"-0px"},"fast");
    }).mouseleave(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','white');$(this).css('color','#333');});
        $(this).animate({bottom:"-0px"},"fast");
    });

CSS:

nav{
float:right;
margin-top:91px;
}
nav ul, nav ul li{
display:inline;
}
nav li{
margin-left:10px;
position:relative;
padding:5px 20px;
color:#A29874;
background-color:#fff;
border-top-right-radius:5px;
border-top-left-radius:5px;
 }

nav a{
position:relative;
text-decoration:none;
 }

如果我非常缓慢地将鼠标移入列表项之一（其中只有几个像素），我就可以实现我想要的效果。这项任务看似应该相对容易，却让我抓狂。

我已经搜索了网络并尝试了诸如解除 mouseenter 事件绑定、仅在 mouseleave 事件触发后才使用条件运行动画之类的操作，但无济于事。

任何建议将不胜感激，最好是在我秃头之前。谢谢！

原文

So I have a navigation and I'm using jQuery's UI animate to make the list item slide down out of view, change colour, and to then slide back up, revealing the button in a different color.

The problem I'm getting is that whenever I hover over the list item, the hover event is triggered continually until the mouse has left.

Even stranger, is that it appears that the mouseleave event triggers right after the hover event, regardless of whether the mouse has actually left the list item. This happens whether I used hover or mouseenter.

Here's what I have:
HTML:

<nav>
    <ul>
        <a href="index.html"><li>Home</li></a>
        <a href="services.html"><li>Services</li></a>
        <a href="portfolio.html"><li>Portfolio</li></a>
        <a href="contact.php"><li>Contact</li></a>
        <a href="about.html"><li>About</li></a>
    </ul>
</nav>

jQuery:

$("nav li").mouseenter(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','orange');$(this).css('color','#fff');});
        $(this).animate({bottom:"-0px"},"fast");
    }).mouseleave(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','white');$(this).css('color','#333');});
        $(this).animate({bottom:"-0px"},"fast");
    });

CSS:

nav{
float:right;
margin-top:91px;
}
nav ul, nav ul li{
display:inline;
}
nav li{
margin-left:10px;
position:relative;
padding:5px 20px;
color:#A29874;
background-color:#fff;
border-top-right-radius:5px;
border-top-left-radius:5px;
 }

nav a{
position:relative;
text-decoration:none;
 }

I can achieve the effect I'm after if I very slowly bring my mouse into one of the list items, just a few pixels inside. This task, which seems as if it should be relatively easy, is driving me nuts.

I've scoured the net and have tried things such as unbinding the mouseenter event, using a conditional to run the animation only after the mouseleave event has triggered to no avail.

Any suggestions would be greatly appreciated, preferably before I go bald.
Thanks!

分享到QQ

分享到微博

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

发布评论

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

滥情空心 2024-11-16 10:04:55

问题的原因是您正在移动元素，使其不再位于鼠标下方。因此显然 mouseleave() 被触发。您可以通过在 a 标签悬停时触发动画来避免这种情况，但将动画定位到 li。请参阅： http://jsfiddle.net/aN4g4/50/

这是你的新js：

$("nav a").mouseenter(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'orange','color':'#fff'});
        });
    $li.stop(true,true).animate({bottom:"-0px"},"fast");
}).mouseleave(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'white','color':'#333'});
        });
    $li.animate({bottom:"-0px"},"fast");
});

你可能有请注意，动画完成后触发的回调函数已进行了一些优化。您可以通过以下方式传递多个 CSS 属性： .css({'prop1':'val1','prop2':val2'}) 另外，我已经优化了代码，因此您不会生成很多 jQuery 对象，因为速度很慢。（注意 var $li 行。）

The reason for your problem is that you're moving the element so it is no longer under the mouse. Therefore obviously mouseleave() is triggered. You can avoid this by triggering the animation on hover of the a tag, but target the li with the animation. See: http://jsfiddle.net/aN4g4/50/

Here's your new js:

$("nav a").mouseenter(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'orange','color':'#fff'});
        });
    $li.stop(true,true).animate({bottom:"-0px"},"fast");
}).mouseleave(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'white','color':'#333'});
        });
    $li.animate({bottom:"-0px"},"fast");
});

You may have noticed that the callback function which fires after the animation finished has been optimized a bit. You can pass multiple CSS properties in this way: .css({'prop1':'val1','prop2':val2'}) Also, I have optimized the code so you're not generating a lot of jQuery objects because that is slow. (notice the var $li line.)

回复收藏 0 原文