JQuery Animate ne s'exécute qu'une seule fois

Question

J'essaye de faire fondre toutes les divs de la classe css .to-be-hidden ET la div avec id = "feat-hover" pour devenir complètement visible quand je survole sur div id = "mission".

Voici mon code:

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

Voici mon code HTML: j'ai remplacé les blocs de texte veux que ce fondu.

<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 --> 

Les scripts exécute correctement quand je passe la souris pour la première fois et il ne fonctionne pas encore.

Aidez s'il vous plaît!

Answer 1

Essayez cela, il résoudra votre problème

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