javascript jquery ajax成功淡入淡出效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6533322/
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 ajax success fade effects
提问by Max
I would like to do some effects like fadeInto page once I get the ajax response.
I tried this,
fadeIn一旦我得到 ajax 响应，我想做一些像翻页这样的效果。我试过这个，
$.ajax({
type: "post",
url: actionLink,
cache: false,
data: ....someData....,
success: function(data) {
$(".response").fadeOut(100);
$(".response").html(data);
$(".response").fadeIn(500);
}
});
This is working but data is displayed first and with a flash of 500ms getting data with fade effect but I need to get the loaded data directly with fade effect.
这是有效的，但首先显示数据，并以 500 毫秒的闪光获取具有淡入淡出效果的数据，但我需要直接使用淡入淡出效果获取加载的数据。
I even tried with Fade out a div with content A, and Fade In the same div with content B, but I still get the same issue.
我什至尝试淡出内容 A 的 div，以及淡入内容 B 的同一个 div，但我仍然遇到同样的问题。
I also tried:
我也试过：
$(".response").fadeOut(100).hide();
$(".response").show().html(data).fadeIn(500);
Still the same. How do I fix this?
还是一样。我该如何解决？
回答by Max
This thing worked.........
这东西奏效了…………
jQuery(".response").fadeOut( 100 , function() {
jQuery(this).html( data);
}).fadeIn( 1000 );
回答by Steve Claridge
Have you tried:
你有没有尝试过：
$(".response").fadeOut(100).html(data).fadeIn(500)
回答by c0d3n4m3
The easiest way I found was to set the initial fadeOut() to '0'. This worked perfectly:
我发现的最简单的方法是将初始的fadeOut() 设置为'0'。这完美地工作：
$(".response").fadeOut(0).html(result).fadeIn(500);
As setting an initial fadeOut() with an actual value makes it 'pop' in, and then it fades in. Still not the desirable result.
由于将初始fadeOut() 设置为实际值使其“弹出”，然后淡入。仍然不是理想的结果。
So by setting the initial fadeOut to 0, means it doesn't spend a tenth of a second fading out before fading in. So you don't get a strange effect.
所以通过将初始的fadeOut 设置为0，意味着它在淡入之前不会花费十分之一秒的时间淡出。所以你不会得到奇怪的效果。
回答by Raka
Concept is: Once ajax response received, fadeIn the message - wait for some seconds (delay) - fadeOut Like this ------ $('div.errorul').fadeIn(600).html( 'msg' ).delay(1000).fadeOut(500);
概念是：一旦收到ajax响应，fadeIn消息-等待几秒钟（延迟）-fadeOut像这样------ $('div.errorul').fadeIn(600).html('msg')。延迟（1000）。淡出（500）；
回答by jsonnull
Try $(".response").fadeOut(100).delay(100).html(data).fadeIn(500)
尝试 $(".response").fadeOut(100).delay(100).html(data).fadeIn(500)
This will force the subsequent operations (the addition of the html to your div) to wait until after the fadeOut has completed.
这将强制后续操作（将 html 添加到您的 div）等待直到淡出完成。
回答by user2007412
success:function(data)
{
$(".response").fadeOut(600, function ()
{
$(".response").html(data)
});
$(".response").fadeIn(600);
}
