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/