CODEWITHSUNDEEP
jqueryfadeinfadeout
Jormungandr
Jormungandr

Reputation: 1

Fading out, then fading in new content with jquery

I've been trying to get this thing to work for a while, and I'm having a problem. While testing offline, the content of a div properly fades out, then the new content fades in from a different HTML. Now, when it's live on the internet, the content fades out, then the same content fades in again, and only then it just gets updated with new content. Like it's lagging or something, but I'm sure that's not the case

Here's the javascript code I used to do it:

$(function() {
    $("#one").click(function() {
        $("#content").fadeOut('slow', function(){
            $("#content").load('main.html').fadeIn('slow');
        });         
    });
});

Upvotes: 0

Views: 1252

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Move the fadeIn code inside the load callback like below,

$(function() {
    $("#one").click(function() {
        $("#content").fadeOut('slow', function(){
            $("#content").load('main.html', function () {
                 $(this).fadeIn('slow');
            });
        });         
    });
});

What could be happening is that the load is taking more time to get main.html (coz of n/w) but your fadeIn kicks in before that.. so moving .fadeIn inside .load callback should fix that problem.

Perhaps you should add a status message if .load is taking more time.. Try something like below..

            $("#content")
                  .html('<b>Loading.. Please wait...</b>')
                  .load('main.html', function () {
                      $(this).fadeIn('slow');
                  });

Upvotes: 4

Related Questions