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

Question

我正在使用jQuery animate(),它只是不起作用.我正试图让一个div从另一个包含它的div中滑出来overflow:hidden.我已尝试过leftanimate的所有组合,没有任何东西.为了确保,我也尝试改变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上查看

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>

在JSFiddle上查看

顺便说一句,你应该尽可能避免使用内联JavaScript(如onclick)和CSS.此外,该align属性在HTML 4.01中已弃用,在HTML5中已删除.