JQuery Animate 只运行一次

Question

我正在尝试使所有属于 .to-be-hidden css 类的 div 褪色，并且当我将鼠标悬停在 div id="mission" 上时，具有 id="feat-hover" 的 div 变得完全可见.

这是我的代码：

$(function() {           
        $("#mission").hover(function () {             
                $(".to-be-hidden").stop().animate({opacity: 0.5}, "slow");  
        $('#feat-hover').stop().animate({'opacity': '1.0'}, "slow"); 
        },          
        function () {      
                $(".to-be-hidden").stop().animate({opacity: 1.0}, "slow");  
        $('#feat-hover').stop().animate({'opacity': '0'}, "slow");     
        });  
}); 

这是我的 HTML： 我用希望这个淡出替换了文本块。

<div id="featured" class="grid col-940">
<div id="left-landing-container" class="left-cont" style="">

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>
</div>

<div id="mission" class="keep-visible">
<div class="left-div" style="padding: 1px 0px 1px 6px; width: 97%;"">Mission Statement</div>
</div>
</div><!-- end of #left-landing-container -->

当我第一次悬停时脚本运行正确，然后它不再运行。

请帮忙！

Answer 1

试试这个，它会解决你的问题

$(function() {           
    $("#mission").hover(function () {             
  $(".to-be-hidden").each(function( index ) {

    $(this).stop().animate({opacity: 0.5}, "slow");  
    $('#feat-hover').stop().animate({'opacity': '1.0'}, "slow");
 });},          
    function () {      
           $(".to-be-hidden").each(function( index ) {

    $(this).stop().animate({opacity: 1.0}, "slow");  
    $('#feat-hover').stop().animate({'opacity': '0'}, "slow");
 });  
    });  
 });