当div结束时，jQuery Animate无法正常工作

Question

我有要制作动画的图像列表：

<div id = "photoHolderSolutions" class = "PhotoHolder">
    <ul id = "solutionsPhotoList" class = "PhotoList">
    </ul>
</div>

使用此CSS：

/*
 * Div containing the list of photos
 */
.PhotoHolder
{
    position: absolute;
    top: 559px;
    left: 57px;
    float: left;
    height: 70px;
}

    /*
     * List of photos for each video
     */
    .PhotoList     
    { 
        height: 70px;
        margin: 0px;
        padding: 0;
    }

        .PhotoList li
        {
            list-style-type: none;
            float: left;
            margin: 0 5px 0 5px;
        }

列表项是通过Javascript创建的，动画效果很好。 我还通过javascript将所有width值（ .PhotoHolder和.PhotoList ）设置为所有图像的宽度。我想隐藏将要动画化的多余项目。 所以我这样做：

    <div id = "topPhotoWindowSolutions" class = "TopPhotoWindow">
        <div id = "photoHolderSolutions" class = "PhotoHolder">
            <ul id = "solutionsPhotoList" class = "PhotoList">
            </ul>
        </div>
    </div>

.TopPhotoWindow
{
    position: absolute;
    top: 559px;
    left: 57px;
    float: left;
    height: 70px;
    width: 420px;
    overflow: hidden;
}

假设TopPhotoWindow将是容纳所有图像的容器，并使用设置的height width和overflow: hidden将使我想显示的图像在较低的div .PhotoList滚动通过时显示。

取而代之的是发生（取决于我如何处理CSS）A）所有动画都停止了，并且什么也没有发生（它正确地通过了方法但没有移动）或B）（发生了这个CSS示例）所有图像消失了）

有什么建议吗？

Answer 1

.TopPhotoWindow已放置在top: 559px ， left: 57px

记住.PhotoHolder是内部.TopPhotoWindow

由于.TopPhotoWindow高度为70px，因此将.PhotoHolder top设置为559px意味着其位于.TopPhotoWindow div之外...这是overflow:hidden ，所以这就是为什么它不显示出来的原因。

Answer 2

意见建议：

• 将位置更改为.PhotoHolder上的相对位置
• 尝试在不使用TopPhotoWindow HTML / CSS的情况下修改.PhotoHolder .PhotoList的CSS