title: JQuery Animate only runs once
body: <p>I am trying to make all the divs that are of the .to-be-hidden css class to fade AND the div with id="feat-hover" to become fully visible when I hover over div id="mission".</p>
  
  <p>Here is my code:</p>
  
  <pre><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");     
          });  
  }); 
  </code></pre>
  
  <p>Here is my HTML:
  I replaced the blocks of text with want this to fade.</p>
  
  <pre><code>&lt;div id="featured" class="grid col-940"&gt;
  &lt;div id="left-landing-container" class="left-cont" style=""&gt;
  
  &lt;div class="to-be-hidden"&gt;
  &lt;div class="left-div"&gt;want this to fade&lt;/div&gt;
  &lt;div class="left-div"&gt;want this to fade&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="to-be-hidden"&gt;
  &lt;div class="left-div"&gt;want this to fade&lt;/div&gt;
  &lt;div class="left-div"&gt;want this to fade&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="mission" class="keep-visible"&gt;
  &lt;div class="left-div" style="padding: 1px 0px 1px 6px; width: 97%;""&gt;Mission Statement&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- end of #left-landing-container --&gt;
  </code></pre>
  
  <p>The scripts runs correctly when I hover for the first time and then it doesn't run again.</p>
  
  <p>Please help!</p>