2

我正在使用 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>

在 JSFiddle 上查看

4

3 回答 3

12

你应该给#gallery div aposition: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>

在 JSFiddle 上查看

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

于 2012-05-09T19:33:32.053 回答
1

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

<div style='position:fixed'>
<div style='position:relative'></div>
</div>
于 2020-01-13T12:32:34.703 回答
0

只需添加：

style="position:relative;"

到要移动的元素。

  • 你不必将它添加到它的容器 div 中。
  • 它将相对于它的容器，并将根据它的位置移动。
于 2017-08-22T06:59:32.420 回答