开发者

Jquery Animate Not Working when div is over it

开发者 https://www.devze.com 2023-03-05 05:47 出处:网络
I have a list of images I am trying to animate: <div id = \"photoHolderSolutions\" class = \"PhotoHolder\">

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

精彩评论

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

关注公众号