Javascript 在jquery中执行效果后转到链接

我想淡出当前页面，淡入新页面。淡入效果很好，但是当我尝试在单击链接时淡出div时，它只是加载新页面，但不会首先淡出。我想淡出内容的div是一个加载了php函数的div，如下所示：

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

脚本：

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

$（函数（）{
$（'article'）.fadeIn（'250'）；
$（'a'）。单击（函数（）{$（'article'）。淡出（'250'））；
});

链接：

分区：

编辑：

我已经混合了你的答案，但我有一个问题，淡出效应的持续时间不起作用。不管我用多长时间，它总是用相同的时间。这就是我现在拥有的：

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

$（函数（）{
$（'a'）。单击（函数（）{var a=$（此）；
$（'#article'）.fadeOut（250，函数（）{window.location='index.php？n='+a.attr（'rel'）；}）；返回false；}）；
$（'#article'）.hide（）.fadeIn（250）；
});

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

按如下方式改革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>

$（函数（）{
$（'article'）.fadeIn（'250'）；
$（'a'）。单击（函数（）{
$（'#article'）.fadeOut（'250'，函数{//callback
window.location=“index.php？n=1”；
})
});
});

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

按如下方式改革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>

$（函数（）{
$（'article'）.fadeIn（'250'）；
$（'a'）。单击（函数（）{
$（'#article'）.fadeOut（'250'，函数{//callback
window.location=“index.php？n=1”；
})
});
});

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

链接：

脚本：

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

$（函数（）{
$（'a'）。单击（function（）{var a=$（this）；$（'article'）。淡出（'250'function（））{
$.get（'index.php？n='+a.attr（'rel'），函数（响应）{
$（'#article'）.html（reponse.fadeIn（'250'）；
}
})}
);
});

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

链接：

脚本：

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

$（函数（）{
$（'a'）。单击（function（）{var a=$（this）；$（'article'）。淡出（'250'function（））{
$.get（'index.php？n='+a.attr（'rel'），函数（响应）{
$（'#article'）.html（reponse.fadeIn（'250'）；
}
})}
);
});

尝试在淡出函数调用中使用回调

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

---

尝试在淡出函数调用中使用回调

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

---

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

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

---

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

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

---

使用preventDevault对你的答案做了一个更精细的版本…使用preventDevault对你的答案做了一个更精细的版本。。。