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

Question

I have a list of images I am trying to animate:

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

With this 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;
        }

The list items are created through Javascript and the animation works fine. I also set all width values ( .PhotoHolder and .PhotoList ) through javascript to be the width of all the images.I want to hide the extra items that are going to be animated to. So I did this:

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

Assuming that TopPhotoWindow would be the container that will hold all the images, and using set height width and overflow: hidden would make only the images I wanted to show up while the lower div .PhotoList scrolled through.

Instead what happens is (depending on how I try to work the css) A) All animations stop, and nothing happens (it goes through the method correctly but doesnt move) or B) (happens with this css example) all images disappear)

Suggestions?

Answer 1

.TopPhotoWindow is ALREADY placed at top: 559px and left: 57px

Remember .PhotoHolder is INSIDE of .TopPhotoWindow

since .TopPhotoWindow height is 70px, setting .PhotoHolder top to 559px means its outside of the .TopPhotoWindow div... which is overflow:hidden , so that's why its not showing up.

Answer 2

Suggestions:

• change position to relative on .PhotoHolder
• Try modifying CSS of .PhotoHolder .PhotoList without using TopPhotoWindow HTML/CSS