如何慢慢淡出div，更新内容，然后慢慢地淡入，使用jQuery？ [英] How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

问题描述

我有一个 div 我想淡出，更新其内容，然后回退。到目前为止我试过：

I have a div I want to fade out, update its content, and then fade back in. So far I have tried:

$('#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.

div 的内容被正确替换，但 fadeIn（）效果是即时的 - 没有平滑的过渡，只是一个快速，快速跳到更新的 div 。

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.

有没有更好的方法来完成这个？非常感谢您的建议。

Is there a better way to accomplish this? Thanks for your advice.

推荐答案

）：

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

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

Your code wasn't working because the new created div is instantly visible. Another solution is to add a display:none like the following:

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

希望这有助于
Cheers

Hope this helps Cheers

这篇关于如何慢慢淡出div，更新内容，然后慢慢地淡入，使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！