Why is updating the margin-top property not being used with jQuery.animate?
I am playing with jQuery for the first time creating a photo slider plugin to keep my feet wet. I can't seem to get the margin-top property to update on my tags. I thought the margin was crumbling, but now I'm not sure. Please show me the light!
I thought the problem was with the 10px mark on the .sider frame and the -58px mark on the .photo slider, but if they collapse, they should result in a -48px difference between, right? Using firebug, when I hover over the image, the margin-top property never changes from 10px.
This is the HTML 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>
and this is the extracted CSS generated with jQuery to make it easier for you to read:
.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:
$(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 on jsbin
source to share
Ahh - it marginTop. ... I suppose the internal parser does not translate "margin-top" into a real marginTop.
Example: http://jsbin.com/uxazo
Note. Your script won't work in IE because you have commas inside your objects:
{
one:1,
two:2, <---- get rid of this.
}
source to share
Looks like I'm late - it's marginTop
not margin-top
inside animate()
. Was it something like this that you were looking for?
I'll answer anyway, as another improvement you might consider is caching $(this)
inside a local variable in commands each()
i.e.
return this.each(function() {
Cache this -> $(this).wrap("<div></div>");
slider_container = $(this).parent();
now becomes
return this.each(function() {
var $this = $(this);
$this.wrap("<div></div>");
slider_container = $this.parent();
This means that a new jQuery object is not created every time you call $()
passing inthis
source to share