Jquery animate left 不起作用，出了什么问题？

Question

我正在使用 jQuery 的 animate() 但它不起作用。我试图让一个 div 从另一个包含它并且具有 overflow:hidden 的 div 中滑落。我已经在动画上尝试了 left 的所有组合，但什么也没有。只是为了确保，我还尝试更改 div(图库)的宽度，它确实更改了宽度，但没有更改左侧。

我做错了什么？

function an() {

  //$('#gallery').fadeOut();
  //$('#gallery').animate({left:'-=1000'},'slow');
  $('#gallery').animate({
    'left': '+=100px'
  }, 'slow');

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div align="center" style="position:relative; height:137px; overflow:hidden; width:1000px; border:3px solid #ff0000;">
  <div id="gallery" style="background-color:#033; width:100px; height:137px;"></div>
</div>
<a href="#" onclick="an(); return false;">test</a>

View on JSFiddle

Answer 1

您应该给#gallery div一个position:relative，然后它就可以正常工作了。

function an() {

  //$('#gallery').fadeOut();
  //$('#gallery').animate({left:'-=1000'},'slow');
  
  $('#gallery').animate({
    'left': '-=700px'
  }, 'slow');

}

#gallery {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div align="center" style="position:relative; height:137px; overflow:hidden; width:1000px; border:3px solid #ff0000;">
  <div id="gallery" style="background-color:#033; width:100px; height:137px;"></div>
</div>
<a href="#" onclick="an(); return false;">test</a>

View on JSFiddle

顺便说一句，您应该尽可能避免内联 JavaScript(如 onclick)和 CSS。此外，align 属性在 HTML 4.01 中已弃用，并在 HTML5 中被消除。