CODEWITHSUNDEEP
javascriptjquery
TheCarver
TheCarver

Reputation: 19713

FadeOut, Replace HTML & FadeIn

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?

Upvotes: 1

Views: 520

Answers (5)

Greg Guida
Greg Guida

Reputation: 7512

You're using jQuery's .html() wrong

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

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

Try:

$("#leftPage").html("<img src='page4.jpg'>");

and:

$("#rightPage").html("<img src='page5.jpg'>");

Upvotes: 2

Keith.Abramo
Keith.Abramo

Reputation: 6955

Try 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");
        });
}

jquery's html is a function, not a property. You pass in the html you want to replace the elements contents with as a parameter

Upvotes: 2

PeeHaa
PeeHaa

Reputation: 72672

The correct syntax for .html() is:

$("#leftPage").html("<img src='page4.jpg'>");

Upvotes: 2

Bojangles
Bojangles

Reputation: 101483

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.

Upvotes: 3

Related Questions