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
精彩评论