Perform function in attr() callback?

Question

Not sure if I am doing this correctly or not.

Here is my .js:

var currentIMG;
$( \'.leftMenuProductButton\' ).hover(function () {

              


        

Answer 1

You can do this with the load event like this:

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
             .one("load",function(){ //fires (only once) when loaded
                $(this).fadeIn("slow");
             }).each(function(){
                if(this.complete) //trigger load if cached in certain browsers
                  $(this).trigger("load");
             });

The fade will start after the image load event fires.

Answer 2

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
         .on("load",function(){ //fires each time when image loaded
            $(this).fadeIn("slow");
         });

This will also properly.