在jQuery中使用fadeToggle时动画周围的元素移动

Question

是否可以通过jQuery fadeToggle属性为不受影响的对象（对象）设置动画？ 简单地：

＆＃13;

＆＃13;

$("#fadeOff_1").click(function(){
  $(".color1").fadeToggle("slow");
});
$("#fadeOff_2").click(function(){
  $(".color2").fadeToggle("slow");
});

＆＃13;

.wrapper {
  background: #eee;
  width:  100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.box {
  width: 125px;
  height: 125px;
  margin: 1%;
  transition: move 1s; /* nope */
  
}
.color1 {background: teal;}
.color2 {background: #cf000f;}
.color3 {background:  #F39C12;}

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<button type="button" id="fadeOff_1">Fade toggle first element</button>
<button type="button" id="fadeOff_2">Fade toggle second element</button>
<div class="wrapper">
<div class="box color1"></div>
<div class="box color2"></div>
 <div class="box color3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

当按下第一个按钮时，它会淡化.color1对象（第一个框），但是当fadeOff过渡完成时，第二个对象（.color2）会跳过＆＃39;进入第一，同一故事的位置，第二和第三。如何动画（转换持续时间）向左移动的元素？

我想要实现类似的东西，但是使用fadeToggle：

＆＃13;

＆＃13;

$("#fadeOff_1").click(function(){
  $(".color1").toggleClass("width");
});
$("#fadeOff_2").click(function(){
  $(".color2").toggleClass("width");
});

＆＃13;

.wrapper {
  background: #eee;
  width:  100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.box {
  width: 125px;
  height: 125px;
  margin: 1%;
  transition: width 1s;
  
}
.box.width {
  width: 0;
}
.color1 {background: teal;}
.color2 {background: #cf000f;}
.color3 {background:  #F39C12;}

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<button type="button" id="fadeOff_1">Width 0 first element</button>
<button type="button" id="fadeOff_2">Width 0 second element</button>
<div class="wrapper">
<div class="box color1"></div>
<div class="box color2"></div>
 <div class="box color3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已经在Stack Overflow上找到了解决方案，但我并不是在寻找不透明度或可视性fadeOff替代方案。