jquery - Jquery淡入淡出

Question

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

淡化效果有点搞砸了，我不知道如何使然后正常工作。

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

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

该页面的我的 jQuery 代码：

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

Answer 1

你的问题就在这里：$('#content').fadeOut('slow').html(data).fadeIn('slow'); }); 这在完成fadeIn之前开始fadeOut。你想这样做：

$('#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'); }); });