jQuery 如何使用jQuery缓慢淡出div，更新内容，然后缓慢淡入div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5879899/
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
How to fade out div slowly, update content, and then fade in div slowly, using jQuery?
提问by Alex Reynolds
I have a divI want to fade out, update its content, and then fade back in. So far I have tried:
我有一个div我想淡出，更新其内容，然后淡入。到目前为止我已经尝试过：
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
$('#myDivID').fadeIn('slow');
});
What happens is that the fade out completes and calls the anonymous callback. So far, so good.
发生的情况是淡出完成并调用匿名回调。到现在为止还挺好。
The div's content is replaced correctly, but the fadeIn()effect is immediate — no smooth transition, just a quick, snappy jump to the updated div.
的div的内容被正确地更换，但fadeIn()效果是立竿见影的-不平滑过渡，只是一个快速，活泼跳跃的更新div。
Is there a better way to accomplish this? Thanks for your advice.
有没有更好的方法来实现这一点？谢谢你的建议。
回答by Edgar Villegas Alvarado
You should do it this way (this works, is tested code):
你应该这样做（这是有效的，经过测试的代码）：
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').html(content);
$('#myDivID').fadeIn('slow');
});
Your code wasn't working because the new created div is instantly visible. Another solution is to add a display:nonelike the following:
您的代码不起作用，因为新创建的 div 立即可见。另一种解决方案是添加display:none类似以下内容：
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
$('#myDivID').fadeIn('slow');
});
Hope this helps Cheers
希望这有助于干杯
回答by kobe
use SetTimeOut
使用 SetTimeOut
setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);
this works
这有效
jsFiddle http://jsfiddle.net/3XYE6/1/
jsFiddle http://jsfiddle.net/3XYE6/1/
$('#doit').click(function(){
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').html('New content in MyDiv ('+Math.random()+')')
setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);
});
})
回答by netbrain
回答by calumbrodie
Try this.
尝试这个。
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').html("all this text");
$('#myDivID').fadeIn('slow');
});
回答by suren
When you use replaceWith the content will be visible that is why there is no smooth transition.
当您使用 replaceWith 时，内容将是可见的，这就是没有平滑过渡的原因。
First hiding the div and then calling fadeIn will give smooth transition.
首先隐藏div，然后调用fadeIn 将提供平滑过渡。
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
$('#myDivID').fadeIn('slow');
});
回答by Tomgrohl
Something like this would work:
像这样的事情会起作用：
$('#myDivID').fadeOut('slow', function() {
$('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>")
$('#myDivID').hide().delay(2000).fadeIn('slow');
});
Test here: http://jsfiddle.net/tomgrohl/PgcTZ/
在这里测试：http: //jsfiddle.net/tomgrohl/PgcTZ/
I've put the hide before the delay to make the animation work.
我在延迟之前放置了隐藏以使动画工作。
