如何使用 jQuery 缓慢淡出 div，更新内容，然后缓慢淡入 div？

Question

我有一个 div 我想要淡出，更新其内容，然后淡入。到目前为止，我已经尝试过：

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

发生的情况是淡出完成并调用匿名回调。到目前为止，一切都很好。

div 的内容已正确替换，但 fadeIn() 效果是立即的 — 没有平滑过渡，只是快速、敏捷地跳转到更新的 div< /代码>。

有更好的方法来实现这一点吗？谢谢你的建议。

Answer 1

您应该这样做（这有效，是经过测试的代码）：

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').html(content);
    $('#myDivID').fadeIn('slow');
});

您的代码不起作用，因为新创建的 div 立即可见。另一个解决方案是添加一个 display:none ，如下所示：

   $('#myDivID').fadeOut('slow', function() {
      $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
      $('#myDivID').fadeIn('slow');
  });

希望这有帮助
干杯

Answer 2

使用 SetTimeOut

setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);

这可以工作

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);
    });    
})

Answer 3

这应该可以！

http://jsfiddle.net/3XYE6/

Answer 4

当您使用 ReplaceWith 时，内容将可见，这就是为什么没有平滑过渡的原因。

首先隐藏 div，然后调用 fadeIn 将实现平滑过渡。

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

Answer 5

试试这个。

http://jsfiddle.net/X3cnT/

$('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html("all this text");
        $('#myDivID').fadeIn('slow');
});

Answer 6

像这样的东西会起作用：

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>")
    $('#myDivID').hide().delay(2000).fadeIn('slow'); 
});

在这里测试： http://jsfiddle.net/tomgrohl/PgcTZ/

我已将隐藏置于延迟之前以使动画正常工作。