Question

我有一个水平列表，想要设置列表宽度的动画以模拟滚动关闭。

这是一个演示问题的小提琴：http://jsfiddle.net/a5Tfu/1/

问题是，当宽度与第一个列表元素之外的任何一个重叠时，该列表元素的内容会完全消失，而不是随着宽度的减小而逐渐从列表边缘消失，就像第一个列表元素一样

我想要的是与第一个元素上的重新调整宽度相同的效果，但是对所有元素都有效。

这是css：

#container {
    position: relative;
    overflow: hidden;
    width: 1000px;
    height: 400px;
}

#list {
    background: #f7f7f7;
    overflow: hidden;
    width: 1660px;
    height: 400px;
}   
    #list li {
        width: 400px;
        height: 400px;
        list-style: none;
        float: left;
    }   

        #left {
            position: relative;
            float: left;
            width: 200px;
            height: 400px;
        }

        #right {
            position: relative;
            float: right;    
            width: 200px;
            height: 400px;
        }

html模板：

<div id="container">
    <ul id="list">
        <li>
            <div id="left">
                <p></p>
            </div>
            <div id="right">
                <p></p>
            </div>
        </li>
        <li>
            <div id="left">
                <p></p>
            </div>
            <div id="right">
                <p></p>
            </div>
        </li>
        <li>
            <div id="left">
                <p></p>
            </div>
            <div id="right">
                <p></p>
            </div>
        </li>
        <li>
            <div id="left">
                <p></p>
            </div>
            <div id="right">
                <p></p>
            </div>
        </li>
    </ul>
</div>

JS：

$(function(){

    $('#list').animate({width: '200px'}, 5000);

});

提前致谢。

Answer 1

为容器设置动画而不是列表。 JSFiddle：http://jsfiddle.net/F5rLB/

$('#container').animate({width: '100px'}, 5000);

重新调整列表宽度时消失列表元素

1 个答案: