开发者

Jquery Animate Not Working when div is over it

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 5开发者_如何学Gopx 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?


.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.


Suggestions:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜