使用jQuery hover() 使元素出现但不触发动画两次

Posted 2023-05-08

【中文标题】使用jQuery hover() 使元素出现但不触发动画两次

【英文标题】：Using jQuery hover() to make element appear but not triggering animation twice

【发布时间】：2012-06-30 03:51:40

【问题描述】：

我正在用 jCycle 构建一个简单的滑块。 当您将鼠标悬停在滑块上时，我希望出现“上一个”和“下一个”箭头。一旦光标离开滑块，我希望箭头再次消失。箭头绝对位于滑块上方。

滑块的 html：

        <div id="next"></div>
        <div id="prev"></div>

        <ul id="s2">            
            <li><img src="bla1" /></li> 
            <li><img src="bla2" /></li>
            <li><img src="bla3" /></li> 
            <li><img src="bla3" /></li>             
        </ul>

我目前正在使用此代码：

jQuery('#s2,#next,#prev').hover( function () 
    jQuery('#next,#prev').animate(opacity: 0.9);
,
function () 
    jQuery('#next,#prev').animate(opacity: 0);
);

这可行，但它会触发两次动画：当您将鼠标悬停在滑块上时，以及当您将鼠标悬停在箭头元素（#next 或 #prev）上时。

如何让动画只触发一次？

例如，请参阅http://fc.boilerroom.tv/。

【问题讨论】：

如果您在帖子中包含相关的滑块 HTML，而不是让人们尝试在您的页面中找到它，您将获得更快更好的答案。

【参考方案1】：

您可以从第一个选择器中删除 #next, #prev 并使用 next, prev 的父对象：

jQuery('#container-main .ticker').hover( function () 
    jQuery('#next,#prev').stop(true).animate(opacity: 0.9);
,
function () 
    jQuery('#next,#prev').stop(true).animate(opacity: 0);
);

注意：我还添加了.stop(true)，因此如果您快速进出悬停，它可以正常工作。

【参考方案2】：

从您的第一个选择中删除#next, #prev...只留下jQuery('#s2')

【讨论】：

因为您的#next、#prev 元素在您的#s2 中。

不，这不起作用。一旦光标悬停在#next 或#prev 上，动画就会再次触发。