Question

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

Answer 1

您应该将#gallery div设为position:relative，然后才能正常工作。

＆＃13;

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

＆＃13;

#gallery {
  position: relative;
}

＆＃13;

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

＆＃13;

View on JSFiddle

顺便说一句，你应该尽可能避免使用内联JavaScript（如onclick）和CSS。此外，{4.0}中不推荐使用align属性，并在HTML5中删除。

Answer 2

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

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

Answer 3

只需添加：

style="position:relative;"

到你要移动的元素。

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

左边的Jquery动画不起作用，有什么不对？

3 个答案: