Question

I’m using the following code:

  $("#galleries").load("letters/index.php");
  $(function(){
  $('#galleries').hide().fadeIn(1500);
  });

everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn’t do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it’s really disturbing my eye.

I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?

generally, this is what im trying to achieve:

 //GET TARGET'S HEIGHT
 //SET #galleries TO THAT HEIGHT
 $("#galleries").load("letters/index.php");
  $(function(){
 $('#galleries').hide().fadeIn(1500);
 });

I don’t know how to get the target’s height and set it. But anyways, will it work? or maybe someone has another solution for me?

Thanks in advance!

Answer 1

You aren’t using the complete callback of load() which allows you to run code after content is loaded.

Try something like this:

$(function(){
/* hide first, then load*/
 $('#galleries').hide().load("letters/index.php", function(){
      /* new content now exists*/
      $(this).slideDown()/* or fadeIn() or any other effect*/
  });
});

SlideDown is not dependent on overall height so will smoothly move content below it down