Jquery 淡入和淡出

Question

看看这个：http://novarose.co.cc/web2/

淡入淡出效果有点混乱起来，我不知道如何使然后正常工作。

我希望代码按以下顺序运行：

1. 淡出块
2. 插入新内容
3. 淡入块

该页面的 jQuery 代码：

$('#navigation a').click(function(){ $.get("page.php", { 页面: $(this).attr('id') }, function(data){ $('#content').fadeOut('slow').html(data).fadeIn('slow'); }); });

Answer 1

你的问题在这里： $('#content').fadeOut('slow').html(data).fadeIn('slow'); });
这会在 fadeOut 完成之前启动 fadeIn。您想要执行此操作：

$('#content').fadeOut('slow', function(){
  $(this).html(data).fadeIn('slow')
});

fadeOut 的第二个参数是在fadeOut 完成后调用的函数。

Answer 2

您可以将淡出移到 ajax 调用之前：

$('#navigation a').click(function(){ $('#content').fadeOut('slow'); $.get("page.php", { page: $(this).attr('id') },
    function(data){ $('#content').html(data).fadeIn('slow'); }); });