jQuery动画左离开不起作用，怎么了? [英] Jquery animate left is not working, what's wrong?

问题描述

我正在使用jQuery的animate()，但它根本不起作用.我正在尝试使一个div滑出另一个包含它并具有overflow:hidden的div.我已经尝试了left的所有组合，但没有设置动画.为了确保这一点，我还尝试更改了div(画廊)的宽度，并且确实更改了宽度，但没有更改左侧的宽度.

I'm using jQuery's animate() and it just doesn't work. I'm trying to get a div to slide off another div that's containing it and has overflow:hidden. I've tried every combination of left on the animate and nothing. Just to make sure, I also tried changing the width of the div (gallery) and it does change the width, but not the left.

我在做什么错了?

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上查看

推荐答案

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

You should give the #gallery div a position:relative and then it works fine.

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.此外，在HTML 4.01中不推荐使用align属性，而在HTML5中则取消了该属性.

By the way, you should avoid inline JavaScript (like onclick) and CSS whenever possible. Also, the align attribute was deprecated in HTML 4.01 and eliminated in HTML5.

这篇关于jQuery动画左离开不起作用，怎么了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！