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

试图做一些相当简单的事情，但它避开了我。我有以下的HTML：jquery - 淡出所有的孩子，除了孩子被徘徊

<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; 
     });

我觉得好像我需要通过选择淡出父DIV的所有孩子#four与我的悬停声明，但我不太确定如何做到这一点。任何帮助将非常感谢，谢谢！

来源

2011-05-24 nickff

请接受答案！ – 2011-05-24 20:56:21

问题是您要将新命令添加到动画队列中。您必须致电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/

来源

2011-05-24 20:38:24 DarthJDG

工作出色。谢谢达思！ – nickff 2011-05-24 20:45:51

达思 - 是否有任何优点使用fadeTo（）而不是animate（）？你知道一个人比另一个人快吗？有一个想法是，fadeTo不依赖于“不透明”，有时在IE中不起作用。 – nickff 2011-05-24 21:09:02

'fadeTo（）'只是为了方便，更容易记住。 jQuery规范化了对css属性的访问，所以你不必担心IE下的不透明，它会在非标准的浏览器上做任何事情。它实际上在文档中声明，使用持续时间为0的'fadeTo'与直接设置'.css（'opacity'，value）'相同。 – DarthJDG 2011-05-24 21:18:47

这应该做的伎俩：

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

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

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

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

来源

2011-05-24 20:46:34

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

回答

相关问题