jQuery-淡出除悬停的孩子以外的所有孩子

如何解决jQuery-淡出除悬停的孩子以外的所有孩子

| 试图做一些相当简单的事情，但这使我难以理解。我有以下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”父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;
        });

我觉得我似乎需要通过在我的hover语句中选择#four来淡出父div的所有子级，但是我不太确定该怎么做。任何帮助将不胜感激，谢谢！     

解决方法

问题是您要向动画队列添加新命令。您必须调用

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/     ,这应该可以解决问题：

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

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

这样，动画可以并行执行。我还对选择器进行了一些优化，以使其更具可读性，并仅对需要动画的元素设置动画。 请注意，您需要等待悬停动画完成之后才能开始下一个动画。如果要立即进行操作，请确保调用$（\'。suiting-thumb \'）。stop（true，false）立即停止所有动画，然后开始下一个动画。