Question

我正在使用无序列表处理滑块。标准结构，例子（我使用的代码不一样）：

<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和div填充20px加上宽度500px。还有一些jQuery就像：

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

我意外地通过我的错误注意到滑动ul左边的jQuery只会在这种情况下滑动它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>

Answer 2

我猜滑动并不欣赏父级的填充。请注意，你正在滑动的东西，ul，根本没有任何填充。

尝试在ul上设置填充，而不是容器。

Answer 3

当您从宽度减去时，第一个div中有20px左+ 20px右= 40px填充，即460px。

填充单位宽度为元素。如果删除填充或增加宽度，应该这样做最诚挚的问候

jQuery在动画左值时缩小填充？奇怪

3 个答案: