Question

I’m having a few issues getting a simple JQuery function to work that fades an element out, replaces the image within and fades back in again.

My function looks like this:

function nextPage() {
        $("#leftPage").fadeOut("slow", function() {
            $("#leftPage").html="<img src='page4.jpg'>";
            $("#leftPage").fadeIn("slow");
        });

        $("#rightPage").fadeOut("slow", function() {
            $("#rightPage").html="<img src='page5.jpg'>";
            $("#rightPage").fadeIn("slow");
        });
}

The fade in/out section works fine but the HTML is not being replaced with the new images. Can you see a problem with this?

Answer 1

function nextPage() {
    $("#leftPage").fadeOut("slow", function () {
        $("#leftPage").html("<img src='page4.jpg'>");
        $("#leftPage").fadeIn("slow");
    });
    $("#rightPage").fadeOut("slow", function () {
        $("#rightPage").html("<img src='page5.jpg'>");
        $("#rightPage").fadeIn("slow");
    });
}

You’re assigning a string to .html which is actually a function that takes a string as an argument, instead of being a property you can assign things to.

Notice I’ve changed .html = "" to .html("") in the above snippet. This now passes a string to .html(), which updates the element accordingly.