title: Jquery - Squares fade and come back
body: <p>I have a bit of a problem with some squares of mine.  They are supposed to fade when the user mouses over and then come back to the normal opacity when they mouse out.  The problem is that they do not go back to the normal opacity when I mouse out.  How do I fix this?</p>
  
  <pre><code>&lt;div class="test"&gt;&lt;/div&gt;
  
  $('.test').each(function(){
      $(this).animate({'opacity': '1.0'}, 500);
      $(this).hover(function(){    
          $(this).stop(1).animate({'opacity': '1.0'}, 500);    
      }, function(){    
          $(this).stop(1).animate({'opacity': '0.6'}, 500)     // at the end of animation
      });
  });
  </code></pre>
  
  <p>I have made a <a href="http://jsbin.com/ebawad/2" rel="nofollow">JS Bin</a></p>
  
  <p>Any help / tutorials would be greatly appreciated.</p>