Question

想象一下水平ul这样的项目：

Item 1 | Item 2 | Item 4

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

不幸的是，这样做会导致Item 4在Item 3淡入之前左/右捕捉。有没有办法让Item 4平滑地设置动画以为新项目腾出空间？

我尝试过使用jQuery＆＃39; 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>

如何动画由于附近有其他元素调用而移动的元素？$ .fadeIn（）调用它们？

1 个答案: