jQuery 在为左值设置动画时减去填充？奇怪的

Question

我正在使用无序列表制作 slider 。标准结构，示例(与我使用的代码不同):

<div style="overflow: hidden;width: 500px;padding: 20px;position: relative">
    <ul style="width: 1000px;position: relative;padding: 0;margin: 0;list-style: none;">
    <li style="width: 500px;padding: 0;margin: 0;float: left;"></li>
    <li style="width: 500px;padding: 0;margin: 0;float: left;"></li>
    </ul>
</div>

使用 li 500px 的宽度和 20px 的 div 填充加上 500px 的宽度例如。 还有一些 jQuery，例如:

$(div ul).animate({left: position.left-500+"px"});

我偶然注意到我的错误，jQuery 在向左滑动 ul 时只会滑动它 460px在这种情况下。似乎它正在自动减掉填充？因此滑动了<ul>每次都关闭。

关于为什么会发生这种情况的任何解释？

Answer 1

我尝试了这个并接下来工作:

要么将 ul 位置更改为绝对位置

或者 像动画一样 $('ul').animate({left: '-=520'+"px"}

20px 仅在 Opera 中添加，即 ff '-=500' 与预期的相对位置一起工作

这是我的测试代码

    <div style="overflow: hidden;width: 500px;padding: 20px;position: relative;background-color: black;">
<ul style="width: 1500px;position: relative;padding: 0;  margin: 0;list-style: none; ">
<li style="width: 500px;padding: 0;margin: 0;float: left; background-color: blue;">-</li>
<li style="width: 500px;padding: 0;margin: 0;float: left;background-color: red;">-</li>
<li style="width: 500px;padding: 0;margin: 0;float: left;background-color: green;">-</li> 
</ul>
</div>  

 <script  type="text/javascript">
 $(document).ready(function(){
// $('ul').animate({left: '-=20'+"px"});       
 $('ul').animate({left: '-=500'+"px"});
 $('ul').animate({left: '-=500'+"px"});    

 })
</script>