如何缓慢地淡出div,更新内容,然后慢慢地褪色,使用jQuery?

前端之家收集整理的这篇文章主要介绍了如何缓慢地淡出div,更新内容,然后慢慢地褪色,使用jQuery?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div我想淡出,更新它的内容,然后退回.到目前为止我已经尝试:
$('#myDivID').fadeOut('slow',function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

发生什么是淡出完成并调用匿名回调.到现在为止还挺好.

div的内容被正确地替换,但是fadeIn()效果是即时的 – 没有平滑的过渡,只是快速跳跃到更新的div.

有没有更好的方法来完成这个?谢谢你的建议.

解决方法

你应该这样做(这个工作,是测试代码):
$('#myDivID').fadeOut('slow',function() {
    $('#myDivID').html(content);
    $('#myDivID').fadeIn('slow');
});

您的代码不工作,因为新创建的div立即可见.另一个解决方案是添加一个显示:不像下面那样:

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

希望这可以帮助干杯

猜你在找的CSS相关文章