如何结合fadeIn()使用jQuery replaceWith()实现元素平滑替换？

嘿，我明白你的问题了——原来的替换操作因为新元素直接显示出来，所以会显得很生硬。咱们可以通过先隐藏新元素，再在替换完成后触发fadeIn()来实现平滑过渡，具体修改方案如下：

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 40px;">
  <button id="btn_test">test_btn</button>
</div>

<script>
$(document).ready(function() {
  // 提前创建新元素并设置为隐藏状态
  var $newElement = $('<div><input/></div>').hide();
  
  $('#btn_test').click(function() {
    var $currentBtn = $(this);
    // 先让按钮淡出
    $currentBtn.fadeOut(function() {
      // 用隐藏的新元素替换按钮
      $currentBtn.replaceWith($newElement);
      // 对新元素执行淡入动画
      $newElement.fadeIn();
    });
  });
});
</script>

关键改动说明 #

• 预先创建并隐藏新元素：我们先把要替换的<div><input/></div>转换成jQuery对象，并用.hide()让它初始处于隐藏状态，避免替换时突然出现。
• 替换后触发淡入：在按钮淡出的回调函数里，完成替换操作后立刻调用.fadeIn()，让新元素平滑显示出来，这样整个替换过程就有了连贯的过渡效果。
• 缓存jQuery对象：把按钮和新元素都缓存到变量里，既提升性能，也避免重复选择DOM元素时可能出现的问题。

这样修改后，点击按钮时会先平滑淡出，然后新元素再慢慢淡入，完全解决了原来的生硬感~

内容的提问来源于stack exchange，提问作者David Foie Gras