带有淡入淡出效果的 jQuery .load()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9337220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .load() with fadeIn effect
提问by Gab
I'm trying to load #content of a url via AJAX using jQuery within #primary. It loads but doesn't fadeIn. What am I doing wrong?
我正在尝试使用 #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;
});
Many thanks for your help.
非常感谢您的帮助。
回答by Gab
Actually I was able to do it by applying the effect to the wrapper div instead...
实际上我可以通过将效果应用于包装器 div 来做到这一点......
$('#primary').fadeOut('slow', function(){
$('#primary').load(link+' #content', function(){
$('#primary').fadeIn('slow');
});
});
回答by Brynner Ferreira
Just this:
只是这个：
$('.element').load('file.html',function(){}).hide().fadeIn();
Or to add this behaviour as default in the load() function:
或者在 load() 函数中将此行为添加为默认值：
$.fn.load_=$.fn.load;
$.fn.load=function(){
return $.fn.load_.apply(this,arguments).hide().fadeIn();
}
回答by Vijaysinh Parmar
You can also use .load() in fading effect like this
您也可以像这样在淡入淡出效果中使用 .load()
$("#container").fadeOut("slow").load('data.html').fadeIn('slow');
$("#container").fadeOut("slow").load('data.html').fadeIn('slow');
回答by Rory McCrossan
When using load()jQuery internally uses html()to updated your element. This means you can't apply any animation to it, as you're just updating the innerHTMLproperty of the element.
在load()内部使用jQuery 时，html()用于更新您的元素。这意味着您不能对其应用任何动画，因为您只是在更新innerHTML元素的属性。
Instead you'll need to write your own AJAX request to get the new HTML, put it in the element, then call fadeIn().
相反，您需要编写自己的 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;
});
I used get()here, but you could just as easily use post()or ajax().
我get()在这里使用过，但您也可以轻松地使用post()或ajax()。
Also, just to note, live()has been deprecated. You should instead use delegate()or, if you are using jQuery 1.7+, on().
另外，请注意，live()已被弃用。你应该使用delegate()，或者如果你正在使用jQuery 1.7+ on()。
回答by badsector
I've found doing something like this works well...
我发现做这样的事情很有效......
$('#Div').fadeOut(0).fadeIn().load('foo.blah.html');
$('#Div').fadeOut(0).fadeIn().load('foo.blah.html');
回答by Khan Laoji
This is the best way to fade in/out it naturaly, first you hide your container then you load your page in this container (it will be loaded but hidden) then just use the Jquery function .fadeIn() and it will unhide it adding the special effect.
这是自然淡入/淡出的最佳方式，首先隐藏您的容器，然后在此容器中加载您的页面（它将被加载但隐藏）然后只需使用 Jquery 函数 .fadeIn() 它将取消隐藏它添加特殊效果。
$(".myClass").click(function ()
{
$("#Container").hide();
$("#Container").load("magasin.html");
$("#Container").fadeIn();
});
