Question

我正在为三个类似的标签项目开发一些功能。基本上，当你将鼠标悬停在一个上面时，我希望两个兄弟姐妹的不透明度达到50％。我设置了一个非常基本的jQuery悬停事件，这里是页面代码......

<div id="footer">
    <a href="#" class="footer-tabs" id="footer-seek">Seek</a>
    <a href="#" class="footer-tabs" id="footer-experience">Experience</a>
    <a href="#" class="footer-tabs" id="footer-gain">Gain</a>
</div>

......和相应的JS：

$('.footer-tabs').hover(
    function () {
        $(this).siblings().animate({ opacity: .5 },500);
    },
    function () {
        $(this).siblings().animate({ opacity: 1 },500);
    }
);

当你盘旋在一个上时，一切都很好，但当你从一个盘旋到另一个时，兄弟姐妹不会同时变暗。我做了一个快速的截屏视频。我确信有一种简单的方法可以让它正常工作，但我对此感到茫然。提前谢谢。

截屏视频：http://dl.dropbox.com/u/1762184/example.mp4

Answer 1

您想要取消兄弟姐妹中的任何正在处理的动画。这就是stop()函数的用途。

$('.footer-tabs').hover(
    function () {
        $(this).siblings().stop().animate({ opacity: .5 },500);
    },
    function () {
        $(this).siblings().stop().animate({ opacity: 1 },500);
    }
);

Answer 2

试试这个：

$('.footer-tabs').hover(
    function () {
        $(this).siblings().animate({ opacity: .5 },"fast");
    },
    function () {
        $(this).siblings().animate({ opacity: 1 },"fast");
    }
);

jQuery动画延迟

2 个答案: