JQuery Анимация запускается только раз

Question

Я пытаюсь сделать все divs из класса .to-be-hidden css, чтобы исчезать И div с id = "feat-hover", чтобы стать полностью видимым, когда я наводил на div ID = "миссия".

Вот мой код:

$(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"); 
}); 
    }); 
});