Question

I’m using jquery + the accordion plugin. That’s working great. Now, I want another image on the page to change when the accordion selection change. I’ve gotten that working too. Here’s the JQuery to make that happen:

//Triggers events on Accordion change
    $(function() {
        var accOpts = {
            changestart: function(e, ui) {
                 var src = "images/about/" + ui.newHeader.html().match(/[\w]+[_][o]/) + ".png";
                $("#poster").attr("src", src);
            }
        };
        $("#accordion").accordion(accOpts);
    });

Now that all that’s working, I want the image to fade in, replacing the old one. I tried implementing the fadeIn function like this: $("#poster").attr("src", src).fadeIn(3000);, but that doesn’t work. Any ideas on how I might modify this code to get that fadeIn working properly?

Thanks!

Answer 1

You have to hide the image first before you fade it in:

$("#poster").hide().attr("src", src).fadeIn(3000);

DEMO

To have a neater effect, you can fadeOut instead of abruptly hide the image. The key here is to use the callback parameter of the .fadeOut() method to ensure the image totally dissapears before changing its source and fading it in:

$("#poster").fadeOut(function() {
    $(this).attr("src", src).fadeIn();
});

DEMO