Question

我第一次玩jQuery，制作一个小的照片滑块插件让我的脚湿透了。我似乎无法获得margin-top属性来更新我的标签。我认为边缘正在崩溃，但现在我不太确定。请告诉我光明！

我认为问题在于.slider-frame上的10px边距和.photo-slider上的-58px边距，但是如果它们崩溃了，它们之间应该产生-48px的边距，对吧？使用firebug，当我将鼠标悬停在图像上时，margin-top属性永远不会从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

上

Answer 1

啊 - 它是 marginTop。 - 我猜内部动画解析器不会将'margin-top'转换为 real marginTop。

示例：http://jsbin.com/uxazo

注意：您的脚本在IE中会失败，因为您的对象中有逗号：

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

Answer 2

看起来我太迟了 - marginTop内margin-top而非animate()。您正在寻找 something like this 吗？

无论如何，我会回答你可能考虑的另一项改进是在$(this)命令中将each()缓存在局部变量中，即

    return this.each(function() { 

  Cache this ->  $(this).wrap("<div></div>"); 
                 slider_container = $(this).parent();

现在变成

    return this.each(function() { 
        var $this = $(this);
        $this.wrap("<div></div>"); 
        slider_container = $this.parent();

这意味着每次调用$()传入this

时，都不会构建新的jQuery对象

为什么margin-top属性不会使用jQuery.animate更新？

2 个答案: