CODEWITHSUNDEEP
jqueryfadein
Mbrouwer88
Mbrouwer88

Reputation: 2292

FadeIn does not work on Load function

I have a question about Jquery fadein. I am trying to use it on a div, but it does not work, even not when hiding it first.

I am using this code which fills the DIV when loading the page:

$('#pagebody').html('<p><img src="/common/images/loader.gif" width="24" height="24" /></p>');
$('#pagebody').load("useradmin.php").hide().fadeIn('slow');

First it loads a little preloader image, then it loads the contents of the div, which i want to fade in. Why doesn't this work?

Upvotes: 1

Views: 649

Answers (4)

adeneo
adeneo

Reputation: 318342

Not sure I get the question, but I'm guessing it would be a good idea to wait until the content is loaded before doing any fading ?

$('#pagebody').hide()
   .html('<p><img src="/common/images/loader.gif" width="24" height="24" /></p>')
   .load("useradmin.php", function() {
       $(this).fadeIn('slow');
   });

On another note, load() will replace the content that was added with html(), so the <p> and <img> element you add with html() is overwritten by the content in useradmin.php, but since it's a preloader, I'm guessing that is the intended effect ?

Upvotes: 0

Andreas Nilsson
Andreas Nilsson

Reputation: 231

$('#pagebody').load('useradmin.php', function() {
  $(this).fadeIn('slow');
});

That should work...

Upvotes: 0

Bob
Bob

Reputation: 8724

You should write something like this.

 $('#pagebody').html('<p><img src="/common/images/loader.gif" width="24" height="24" /></p>').load("useradmin.php", function(){
       $('#pagebody').hide().fadeIn('slow');

    });

Upvotes: 0

JJJ
JJJ

Reputation: 33153

$.load() is asynchronous - in this case it means that .hide().fadeIn() will be executed before the load is complete. Put the fadeIn to a callback function that will execute after the content has loaded:

$('#pagebody').load("useradmin.php", function() {
    $( this ).hide().fadeIn('slow');
});

​

Upvotes: 1

Related Questions