nice jquery load effect

Question

Hello,

I would like to load a page inside a div with fadeTo effects. I have created this function for that

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php')
                .fadeTo(300,1.0);;
            }); 
}

The fade from current contents to the image is ok,but after that ,the new contents pop all of a sudden .

I also tried this,but same results :

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php',$("#showdata").fadeTo(300,1.0));
            }); 
}

Answer 1

You need to wrap your code for the .load() callback as an anonymous function like this:

function show(div) {
  $("#showdata").fadeTo(300,0.0,function() {
    $("#showdata").html('<img src="images/loading.gif" />')
                  .load('includes/show/'+div+'.inc.php', function() {
                     $(this).fadeTo(300,1.0)
                  });
  }); 
}

Answer 2

I tried your code, and it seems to work as you intended. I had to increase the fade time from 300ms to 2000ms to see the fadein better.

The one problem you will have is the loading.gif not showing up. That is because you fade that element out, so you're not going to see anything there :)

---

edit: you can do something like this instead.

function show(div){
    $("#showdata").fadeTo(2000,0.0,function() {
        $("#showdata")
        .parent().append('<img src="loading.gif" />') //add the image to the container, so you can see it still
        .end().load('includes/show/'+div+'.inc.php', function(){
            $("#showdata")
            .parent().find('img').remove() //remove the image once the page is loaded. 
            .end().end().fadeTo(2000,1.0);
        });
    }); 
}

You would have to add a container div around #showdata.

<div>
   <div id="#showdata">TEST</div>
</div>