如何使用jQuery缓慢淡出div，更新内容，然后缓慢淡入div? [英] 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');
  });

希望这有帮助干杯

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