Just delving into the world of jQuery for the first time, I decided to create a simple photo slider plugin as a beginner project. However, I've encountered an issue with updating the margin-top property on my image tags. Initially, I thought the margins were collapsing, but now I'm uncertain. Any guidance would be greatly appreciated!
I suspected that the problem lay in the 10px margin on .slider-frame and the -58px margin on .photo-slider, but if they were collapsing, shouldn't it result in a -48px margin between them? Upon inspecting with firebug, the margin-top property remains unchanged at 10px when hovering over the image.
Here is the HTML code that I am generating:
<div id="photos" class="photo-slider-container">
<div class="photo-slider">
<img class="slider-frame" src="images/test-image.jpg"/>
<img class="slider-frame" src="images/test-image-2.jpg"/>
<img class="slider-frame" src="images/test-image-3.jpg"/>
<img class="slider-frame" src="images/test-image-4.jpg"/>
<img class="slider-frame" src="images/test-image-5.jpg"/>
</div>
</div>
Additionally, here is the CSS extracted using jQuery for better clarity:
.photo-slider-container{
overflow: hidden;
visibility: visible;
position: relative;
background-color: rgb(0, 0, 0);
height: 216px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.photo-slider {
margin: -58px 0px 0px -580px;
position: absolute;
padding-top: 1px;
left: 50%;
top: 50%;
width: 1160px;
}
.slider-frame {
margin: 10px 5px;
float: left;
width: 96px;
height: 96px;
}
This is the hover code snippet being utilized:
$(this).hover(
function(){
$(this).stop().animate({
"height" : opts.large_image_height,
"width" : opts.large_image_width,
"margin-top" : opts.large_image_height / -2 + "px"
}, { duration : 250 })
},
function() {
$(this).stop().animate({
"height" : opts.small_image_height,
"width" : opts.small_image_width,
"margin-top" : "10px"
}, { duration : 250 })
}
);
Edit Uploaded on jsbin