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

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

建议？

Answer 1

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

请记住.PhotoHolder位于.TopPhotoWindow

的内部

由于.TopPhotoWindow高度为70px，将.PhotoHolder顶部设置为559px意味着它位于.TopPhotoWindow div之外... overflow:hidden，这就是为什么它不显示起来。

Answer 2

建议：

在.PhotoHolder上将位置更改为亲戚
尝试修改.PhotoHolder .PhotoList的CSS而不使用TopPhotoWindow HTML / CSS

当div结束时，Jquery Animate不工作

2 个答案: