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 with my hover statement来淡出父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）立即停止所有动画，然后开始下一个动画。

jquery - 淡出所有孩子，除了孩子被徘徊

2 个答案: