调整列表宽度时消失的列表元素

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);