关于改变相对位置的动画

Question

我有两个跨度（A和B），它们在包装器中以text-align:center为中心。 有时我使用Jquery脚本：

B.fadeOut(function () {
 C.fadeIn()
})

用C代替B.

但是B和C的大小不同，因此由于center属性，A必须替换。

我的问题是A＆＃34;传送＆＃34;在新的位置，我希望用动画顺利替换它。

有办法吗？

编辑（使用代码段）：

＆＃13;

＆＃13;

var i = true;
$('#button').click(function () {
  if (i) {
    $('#B').fadeOut(function () {
      $('#C').fadeIn()
    })
    i = false
  }
  else {
    $('#C').fadeOut(function () {
      $('#B').fadeIn()
    })
    i = true
  }
})

＆＃13;

.wrapper {
  width:100%;
  text-align:center;
}

#C {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span id="A">AAAA</span>
  <span id="B">BBBB</span>
  <span id="C">CCCCCCCCCCCCCCC</span>
</div>
<div class="wrapper">
  <button id="button">Click Me</button>
</div>

＆＃13;

＆＃13;

＆＃13;