Why won't the margin-top property update using jQuery.animate?

Question

I'm playing around with jQuery for the first time, making a little photo slider plugin to get my feet wet. I can't seem to get the margin-top property to update on my tags. I thought the margins were collapsing, but now I'm not so sure. Please show me the light!

I was thinking the problem was with the the 10px margin on .slider-frame and the -58px margin on .photo-slider, but if they collapsed, they should result in -48px margin between, right? Using firebug, when I hover over the image, the margin-top property never changes from 10px.

This is the HTML that I'm 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 put up on jsbin

Answer 1

Ahh - it's marginTop. - I guess the internal animation parser doesn't translate the 'margin-top' to the real marginTop.

Example: http://jsbin.com/uxazo

Note: Your script will fail in IE because you have trailing commas inside of your objects:

{
one:1,
two:2, <---- get rid of this.
}

Answer 2

Looks like I'm too late - it's marginTop not margin-top inside of animate(). Was it something like this you were looking for?

I'll answer anyway as another improvement that you might consider is caching $(this) inside a local variable in the each() commands, 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 isn't being constructed each time you call $() passing in this