delay .load( ) function

[vizz]

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"> </script>

<ul id="navlist">
     <li><a href="home">Home</a></li>
     <li><a href="contact">Contact Us</a></li> 
     <li><a href="about">About Us</a></li>					
   </ul>

#content{ width: 100%;
    height:350px;
    display: none;
    background: orange;
    position: absolute;
    left: 0px;
    bottom: 0;}

<script type='text/javascript'>
$(document).ready(function(){

   $('#navlist li a').click(function(){
     
        $('#content').hide("slide", { direction: "down" }, 900);
           
           var page= $(this).attr('href');
	   $('#content').load('' + page + '.php');
      
        $('#content').show("slide", { direction: "down" }, 1000);

        return false;						
   });
});
</script>

This function slides down and up div "#content". Function .load() should fetch pages after "#content" div goes hidden and then it show fetched results. But it instantly fetch pages then goes hidden(slide down) and again it is shown(slide up).

How to delay .load() function that it should fetch pages after going hidden down?

[pritaeas]

hide() can use a callback function when done, so you should nest them.

[vizz]

Thanks,
But can you alter the code?

hide() can use a callback function when done, so you should nest them.

[pritaeas]

Something like this, read up on callbacks though.

<script type='text/javascript'>
  $(document).ready(function(){
    $('#navlist li a').click(function(){
      $('#content').hide("slide", { direction: "down" }, 900, function(){
        var page= $(this).attr('href');
	$('#content').load('' + page + '.php', function(){
          $('#content').show("slide", { direction: "down" }, 1000);
        });
      });
      return false;						
   });
});
</script>

[vizz]

Thanks for trying.
This function stops fetching results. It just slides div up and down.

Something like this, read up on callbacks though.

<script type='text/javascript'>
  $(document).ready(function(){
    $('#navlist li a').click(function(){
      $('#content').hide("slide", { direction: "down" }, 900, function(){
        var page= $(this).attr('href');
	$('#content').load('' + page + '.php', function(){
          $('#content').show("slide", { direction: "down" }, 1000);
        });
      });
      return false;						
   });
});
</script>

[pritaeas]

Of course. You can try to put the var page = before the content hide line. $(this) points to to wrong content.

[vizz]

Hey, it worked!!!

can you help more?

how to add

if ( $('#content').is(":visible") ) { }

to hide div only if it is visible?

Of course. You can try to put the var page = before the content hide line. $(this) points to to wrong content.