我如何使那些由于附近的其他元素调用$. fadein()而移动的元素产生动画?

How can I animate elements that move due to other nearby elements having $.fadeIn() called on them?

本文关键字：元素 移动 动画 fadein 调用 那些 何使 于附 其他      更新时间：2023-09-26

想象一个项目的水平ul:

Item 1 | Item 2 | Item 4

我希望将Item 3插入到适当的位置。如果我假设它已经在那里，但只有display: none;，我可以调用$('.item3').fadeIn()使用jQuery使其淡入。

不幸的是，这样做会使Item 4在Item 3淡入之前向左/向右捕捉。是否有一种方法可以使Item 4平滑地动画为新项目腾出空间?

我已经尝试使用jQuery的show('slide')为此，但它似乎不能很好地发挥水平ul。我对这个问题也很好奇;是否有一些方法可以应用transition属性来使元素的任何运动平滑?

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

注意，当Item 3淡入淡出时，Item 4会向左或向右调整以适应这种变化。我想让它平滑地向左或向右移动。

一个可能的解决方案:

$(
    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>

相关文章：