在jquery中做效果后转到链接

Question

我想淡出当前页面并淡入新页面。淡入效果很好，但是当我尝试在单击链接时淡出 div 时，它只会加载新页面，但不会先淡出。我想要淡出和内容中的 div 加载了这样的 php 函数：

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>

编辑：

我已经通过混合你的答案来完成它，但我有一个问题，淡出的持续时间效果不起作用。无论我使用多长时间，它总是需要相同的时间。这就是我现在所拥有的：

<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>

Answer 1

返回 false 以阻止导航。动画完成后使用回调来手动导航。

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

Answer 2

您的链接正在按照预期进行重定向。

像这样改革你的 html 链接：

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

并像这样改革你的 jQuery：

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

Answer 3

尝试在 fadeOut 函数调用中使用回调。

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

Answer 4

不需要每次刷新整个页面，只需将新内容加载到文章 div 中即可，如下所示：

链接：

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

脚本：

<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>