title: Perform function in attr() callback?
body: <p>Not sure if I am doing this correctly or not.</p>
  
  <p>Here is my <code>.js</code>:</p>
  
  <pre><code>var currentIMG;
  $( '.leftMenuProductButton' ).hover(function () {
  
       currentIMG = $("#swapImg").attr("src");
       var swapIMG = $(this).next(".menuPopup").attr("id");
  
       $("#swapImg").css("opacity", 0)
                    .attr("src", productImages[swapIMG], function(){
            $("#swapImg").fadeTo("slow", 1);
       });
  
  }, function () {
       $("#swapImg").stop().attr("src",currentIMG);   
  });
  </code></pre>
  
  <p>What I am trying to do is Set a IMG Opacity to 0 (<code>#swapImg</code>), replace it's <code>src</code>, then fade it back in. So I am trying to fade it back in using a callback from the <code>.attr()</code>. </p>
  
  <p>If I am doing this incorrectly, can someone please explain a better way to do this? The reason I am trying to do it in the callback is that I need the fadeTo to only occur after the new image is fully loaded, otherwise it does a bit of a flash.</p>
  
  <p>I am using jQuery 1.4, and according to <a href="http://jquery14.com/day-01/jquery-14" rel="nofollow noreferrer">http://jquery14.com/day-01/jquery-14</a> it appears you can do a callback in the <code>.attr()</code> method.</p>