为什么不使用jquery.animate更新Margin Top属性?

我第一次玩jquery,制作一个小的照片滑块插件,让我的脚湿润。我似乎无法更新标签上的Margin Top属性。我以为利润率在下降,但现在我不太确定。请把灯给我看看!

我在想问题出在.slider框架上的10px边距和.photo滑块上的-58px边距上,但是如果它们崩溃了,它们应该会导致-48px之间的边距,对吗?使用Firebug,当我将鼠标悬停在图像上时,MarginTop属性永远不会从10px改变。

这是我正在生成的HTML:

<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>

这是用jquery生成的提取的css,使您更容易阅读:

.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).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 })
  }
);

编辑 穿上 jsbin