Go to the link after do the effect in jquery

I want to fade out the current page and fade in the new one. The fade in work well, but when I try to fade out the div when the link is clicked, It just load the new page, but it doesn't fade out first. The div's which I want to fade out and in content is a loaded with a php function like this:

Script:

<script type="text/javascript">
     $(function(){
        $('#article').fadeIn('250');
        $('a').click(function() {$('#article').fadeOut('250')});
     });
</script>

Link:

<a href="index.php?n=1"><li>Article 1</li></a>

Div:

<div id="article">
    <?php
      $n='articles/article'.$_GET['n'].'.php';
      if (is_file($n)) {include($n);} else {include ("articles/error.php");}
    ?>
</div>

EDIT:

I have already done it by mixing your answers, but I have a problem, the duration of the fadeOut effect doesn't work. No matter what duration I use, it always takes开发者_如何学JAVA the same. That's what I have now:

<script type="text/javascript">
        $(function () {
            $('a').click(function () { var a = $(this);
                  $('#article').fadeOut( 250, function () { window.location = 'index.php?n=' + a.attr('rel'); }); return false; });
            $('#article').hide().fadeIn(250);
          });
</script>

Return false to prevent navigation. Use callback after animation completes to navigate manually.

  $(function () {
                $('#article').fadeIn('250');
                $('a').click(function () {
                    $('#article').fadeOut('250',
                        function () {
                            window.location = $(this).prev().attr("href");
                        }
                        ); return false;
                }
                );
            });

Your link is redirecting as it is supposed to.

Reform your html Link like this:

<a href="javascript:void(0)"><li>Article 1</li></a>

and reform your jQuery like so:

<script type="text/javascript">
     $(function(){
        $('#article').fadeIn('250');
        $('a').click(function() {
            $('#article').fadeOut('250', function{ //callback
                    window.location ="index.php?n=1";
                    })
          });
     });
</script>

Try using a callback in the fadeOut function call.

$('a').click(function(e) {
  link_href = this.href;
  $('#article').fadeOut(250, function() {
    window.location.href = link_href;
  });
  return false;
});

There is no need to refresh the entire page each time, just load the new content into the article div like so:

link:

<a href="#" rel="1"><li>Article 1</li></a>

Script:

<script type="text/javascript">
     $(function(){
        $('a').click(function() {var a = $(this); $('#article').fadeOut('250' function(){
               $.get('index.php?n=' + a.attr('rel'), function(response){
                    $('#article').html(reponse).fadeIn('250');
               }
           })}
        );
     });
</script>