jquery - 淡出所有孩子，除了孩子被悬停答案

【问题标题】：jquery - fade out all children except child being hoveredjquery - 淡出所有孩子，除了孩子被悬停
【发布时间】：2011-05-24 20:33:18
【问题描述】：

试图做一些相当简单的事情，但它让我望而却步。我有以下 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 sn-p 成功地这样做了，但是在淡出/淡入之间有一个短暂的延迟：

$('.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 的所有子项，但我不太确定该怎么做。任何帮助将不胜感激，谢谢！

【问题讨论】：

请采纳！

标签： jquery hover parent-child fade

【解决方案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/

【讨论】：

Darth - 使用 fadeTo() 而不是 animate() 有什么优点吗？你知道一个比另一个快吗？我的一个想法是，fadeTo 不依赖于有时在 IE 中不起作用的“不透明度”。
fadeTo() 只是为了方便，也许更容易记住。 jQuery 规范了对 css 属性的访问，因此您不必担心 IE 下的不透明度，它会在非标准浏览器上做任何需要做的事情。它实际上在文档中声明使用持续时间为 0 的 fadeTo 与直接设置 .css('opacity', value) 相同。
你怎么能做同样的事情，但使用图像按钮？
@Rafael 它应该适用于任何标记，只需相应地更改您的选择器。您使用什么标记作为“图像按钮”？

【解决方案2】：

这应该可以解决问题：

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

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

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

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

【讨论】：