带有fadeIn效果的jQuery .load（）

我正试图在#primary中使用jQuery通过AJAX加载URL的#content。 它加载但不会淡入。 我究竟做错了什么？

$('.menu a').live('click', function(event) { var link = $(this).attr('href'); $('#content').fadeOut('slow', function(){ $('#primary').load(link+' #content', function(){ $('#content').fadeIn('slow'); }); }); return false; }); 

非常感谢您的帮助。

Answer 1

实际上我可以通过将效果应用于包装div来实现它…

 $('#primary').fadeOut('slow', function(){ $('#primary').load(link+' #content', function(){ $('#primary').fadeIn('slow'); }); }); 

Answer 2

只是这个：

 $('.element').load('file.html',function(){}).hide().fadeIn(); 

或者在load（）函数中将此行为添加为默认值：

 $.fn.load_=$.fn.load; $.fn.load=function(){ return $.fn.load_.apply(this,arguments).hide().fadeIn(); } 

Answer 3

你也可以像这样使用褪色效果.load（）

$("#container").fadeOut("slow").load('data.html').fadeIn('slow');

Answer 4

当使用load() jQuery在内部使用html()来更新你的元素。 这意味着您无法对其应用任何动画，因为您只是更新元素的innerHTML属性。

相反，您需要编写自己的AJAX请求以获取新的HTML，将其放入元素中，然后调用fadeIn() 。

 $('.menu a').live('click', function(event) { var link = $(this).attr('href'); $('#content').fadeOut('slow', function() { $.get( link +' #content', function(data) { $("#primary").html(data).fadeIn('slow'); }, "html" ); }); return false; }); 

我在这里使用了get() ，但你可以很容易地使用post()或ajax() 。

另外，请注意， live()已被弃用。 您应该使用delegate()或者，如果您使用jQuery 1.7+，则使用on() 。

Answer 5

我发现做这样的事情效果很好……

$（ ‘＃DIV’）淡出（0）.fadeIn（）负载（ ‘foo.blah.html’）。;

Answer 6

这是自然淡入/淡出的最好方法，首先你隐藏你的容器，然后你在这个容器中加载页面（它将被加载但隐藏）然后只使用Jquery函数.fadeIn（），它将取消隐藏它添加特效。

 $(".myClass").click(function () { $("#Container").hide(); $("#Container").load("magasin.html"); $("#Container").fadeIn(); });