当 div 结束时，Jquery Animate 不工作答案

【问题标题】：Jquery Animate Not Working when div is over it当 div 结束时，Jquery Animate 不工作
【发布时间】：2011-05-12 17:31:52
【问题描述】：

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

<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 将是容纳所有图像的容器，并且使用 set height width 和 overflow: hidden 将只显示我想要显示的图像，而下部 div .PhotoList 滚动通过。

相反，会发生什么（取决于我如何尝试使用 css）A）所有动画都停止，并且什么也没有发生（它正确地通过该方法但没有移动）或 B）（发生在这个 css 示例中）所有图像消失）

建议？

【问题讨论】：

你能把这个例子改成 jsfiddle 吗？
是的，让我看看我能不能快速重新创建它

标签： jquery html css jquery-ui jquery-animate

【解决方案1】：

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

记住.PhotoHolder 在.TopPhotoWindow 的内部

由于.TopPhotoWindow 的高度为70px，将.PhotoHolder 设置为559px 意味着它在.TopPhotoWindow div 之外...即overflow:hidden，所以这就是它不显示的原因。

【讨论】：

是的，我刚刚注意到.. 将 .PhotoHolder 设置为 top: 0; left: 0; 修复了它

【解决方案2】：

建议：

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

【讨论】：