Jquery animate left 不工作，怎么了？答案

【问题标题】：Jquery animate left is not working, what's wrong?Jquery animate left 不工作，怎么了？
【发布时间】：2012-05-09 19:26:54
【问题描述】：

我正在使用 jQuery 的 animate()，但它不起作用。我试图让一个 div 从另一个包含它的 div 上滑出并具有overflow:hidden。我已经在动画上尝试了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

【问题讨论】：

标签： jquery jquery-animate

【解决方案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 中被淘汰。

【讨论】：

提交者提供的示例在解决方案之外有错误。请遵循有关内联脚本的建议。
哇，这行得通……那真是要了我的命。你建议我如何做 onclick？
@Damien - 因为你有一个链接，但你真的像按钮一样使用它，创建一个按钮（或者甚至可能是一个 span 或 div），然后使用 jQuery 定位它。例如：$('button').click(function(){an();});。 jsfiddle.net/j08691/cLdRW/23
这样做有好处吗？另外，我可以使用什么来对齐？
@Damien - 图库 div 上的margin:0 auto 应该这样做，其优点是内容与演示文稿分离。

【解决方案2】：

您必须将position: relative 设置为主要属性下的所有属性，才能激活animate() 功能。

<div style='position:fixed'>
<div style='position:relative'></div>
</div>

【讨论】：

【解决方案3】：

只需添加：

style="position:relative;"

到要移动的元素。

您不必将其添加到它的容器 div 中。
它将相对于它的容器，并根据它的位置移动。

【讨论】：