javascript - 在jquery中做效果后转到链接

Question

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

脚本:

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

链接:

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

分区:

<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;
                }
                );
            });