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

这样的事情会起作用：

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

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

我在延迟之前把隐藏起来让动画有效。

Answer 5

当你使用replaceWith时，内容将是可见的，这就是没有平滑过渡的原因。

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

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

Answer 6

试试这个。

http://jsfiddle.net/X3cnT/

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

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

6 个答案: