.load（）带有外部网页的动画？

Question

Here is basically what I want to do:

I want to slideUp() a div with my content. I want to .load() an external web page (on the same server) in that div and .slideDown() that div.

For now here is what I have:

$(document).ready(function() {  
   $('a').click(function(){  
   $('.content').slideUp('1000');
   $('.content').hide().load('about.html');
   $(".content").slideDown('1000');
   });  
});

Basically here's what I get: the div .content hides itself, loads the about.html page, and appears. But no slideUps or slideDowns.

Anyone has an idea?

Sorry if this is a noob question, this is the first real time I'm trying js/jquery.

Thanks in advance.

Answer 1

That's because those are asynchronous actions. You have to continue execution in callbacks:

$('a').click(function(){  
   $('.content').slideUp('1000', function() {
     this.hide().load('about.html', function() {
       this.slideDown('1000');
     });
   });
});

Answer 2

try:

$('a').click(function(){  
   var el = $('.content'),                      //cache content to avoid multiple calls
       slidetime = 1000;                        
   el.slideUp(slidetime,function(){             //slide up
       el.hide().load('about.html',function(){  //afterwards, load
           el.slideDown(slidetime);             //afterwards, slide
       });
   });
}); 

Answer 3

you are passing string '1000' to slideUp or slideDown. It should be number or string that it can take like 'slow'...

Answer 4

Try This

$(document).ready(function() {  
   $('a').click(function(){  
   $('.content').slideUp(1000);
   $('.content').hide().load('index2.html');
   $(".content").slideDown(1000);
   });  
});

Cheers :)