0

我正在用 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/。

4

2 回答 2

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)，因此如果您快速进出悬停，它可以正常工作。

于 2012-06-28T15:27:09.123 回答
0

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

于 2012-06-28T15:28:11.477 回答