jquery - 淡出除悬停的子项之外的所有子项

Question

试图做一些相当简单的事情，但它却让我困惑。我有以下 HTML：

<div id="four">
                <div id="thumb1" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit2-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb3" class="suiting-thumb">
                    <img src="img/gallery/suit3-thumb.jpg" alt="" title="" />
                </div>
</div>

我想做的就是“调暗”父 div 的子级，除了悬停的子级。我用这个 jQuery 代码片段成功地做到了这一点，但是在淡出/淡入之间有一个短暂的延迟：

$('.suiting-thumb').hover(function() {
                var thumbBtnIdPrefix = 'thumb';
                var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
                $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').animate({
                    "opacity": .3
                }),200;             
            },
            function() {
                $('.suiting-thumb').animate({
                    "opacity": 1
            }),200;
        });

我觉得好像我需要通过使用悬停语句选择 #four 来淡出父 div 的所有子元素，但我不太确定该怎么做。任何帮助将不胜感激，谢谢！

Answer 1

问题是您正在向动画队列添加新命令。您必须调用 stop() 来停止所有正在进行的动画并立即启动新的动画。

$('.suiting-thumb').hover(function() {
    var thumbBtnIdPrefix = 'thumb';
    var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
    $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').stop().animate({
        "opacity": .3
    }), 200;
}, function() {
    $('.suiting-thumb').stop().animate({
        "opacity": 1
    }), 200;
});

http://jsfiddle.net/ywUUL/1/

Answer 2

这应该可以解决问题：

$('.suiting-thumb').hover(function() {
                $('.suiting-thumb').not(this).animate({
                    "opacity": .3
                },200);

                $(this).animate({
                    "opacity": 1
                },200);
        });

这样动画就可以并行执行。我还对选择器进行了一些优化，使其更具可读性，并且仅对需要动画的元素进行动画处理。

请注意，您需要等待悬停动画完成才能开始下一个悬停动画。如果您希望立即执行此操作，请确保调用 $('.suiting-thumb').stop(true, false ) 立即停止所有动画，然后开始下一个动画。