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

问题描述

我正在使用jQuery的 animate()，但这根本不起作用.我正在尝试使一个div滑出另一个包含该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屋！