Ajax：只有在满载时才淡入新内容

我不知道这种技术是否错误，但我真的只希望新内容在满载时淡出。 看起来像beforeSend和完整发送对时间没有影响。 fe。即使在上滑之前，新内容也会逐渐消失。

我还不熟悉你必须知道的ajax。

这是我的代码：

$(function(){ var replacePage = function(url) { $.ajax({ url: url, type: 'get', dataType: 'html', beforeSend: function() { $(".menue").slideUp(); }, success: function(data){ var dom = $(data); var html = dom.filter('#content').html(); $('#content').html(html); }, complete: function(){ $("#content").fadeIn(); } }); } $('nav a').live('click', function(e){ history.pushState(null, null, this.href); replacePage(this.href); e.preventDefault(); $("#content").hide(); }); $(window).bind('popstate', function(){ replacePage(location.pathname); }); }); 

Answer 1

请尝试以下方法：

 success: function(data){ var dom = $(data); var html = dom.filter('#content').html(); $(".menue").promise().done(function(){ $('#content').html(html).fadeIn() }) }, 

或者您可以使用slideUp()的回调函数，该函数在动画完成后执行：

 $(".menue").slideUp('slow', function(){ $.ajax({ url: url, type: 'get', dataType: 'html', success: function(data){ var dom = $(data); var html = dom.filter('#content').html(); $('#content').html(html).fadeIn() } }); }) 

请注意，不推荐使用live() ，而是可以使用on()方法。

Answer 2

将ajax调用中的success成功函数更改为：

 success: function(data){ var dom = $(data); var html = dom.filter('#content').html(); $('#content').html(html).hide().fadeIn(); }, 

请记住从完整调用中删除fadeIn（）。