Perform function in attr() callback?

Question

Hello,

Not sure if I am doing this correctly or not.

Here is my JS:

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

    });

What I am trying to do is Set a IMG Opacity to 0 (#swapImg), replace it's SRC, then fade it back in. So I am trying to fade it back in using a callback from the attr().

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.

I am using jquery 1.4, and according to http://jquery14.com/day-01/jquery-14 it appears you can do a callback in the attr() method.

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.