我如何為由於附近其他元素調用$ .fadeIn（）而移動的元素制作動畫？

Question

想像一下水平ul的物品：

Item 1 | Item 2 | Item 4

我希望將Item 3插入其適當位置。 如果我假設它已經存在，而僅display: none; ，我可以調用$('.item3').fadeIn()使其使用jQuery淡入。

不幸的是，這樣做會使Item 4 Item 3在淡出Item 3之前向左/右對齊。是否有辦法使Item 4平滑地動畫以為新項目騰出空間？

我曾嘗試為此使用jQuery的show('slide') ，但它似乎不能與水平ul很好地配合使用。 我對此也很好奇。 有什么方法可以應用transition屬性來使元素的平滑移動？

最低工作示例http://jsfiddle.net/L2uh36rc/

請注意，當Item 3淡入和淡出時， Item 4向左或向右對齊以適應該更改。 我希望它可以平滑地左右動畫。

Answer 1

一種可能的解決方案：

 $( function() { $('#toggle').on('click', function() { var target = $('.target'); var w = target.data('originalWidth'); var curWidth = target.width(); if( target.css('display') === 'none'){ if( ! w ) { w = curWidth; target.data('originalWidth' , w); } target.css({width:0,opacity : 0}).show().animate( { opacity : 1 , width : w + 'px'} , 777 , function(){ $('.target').show(0); } ); }else{ target.animate( { opacity : 0 , width : 0 + 'px'} , 777 , function(){ $('.target').hide(0); } ); }; }); } ); 

 ul li { display: inline-block; overflow : hidden; white-space : nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Item 1</li> <li>Item 2</li> <li class="target" style="display: none;">Item 3</li> <li>Item 4</li> </ul> <button id="toggle">Toggle Item</button> <div></div>