jQuery在使左值動畫時縮小填充？奇怪

我正在使用無序列表的滑塊。標準結構，例如（不一樣的代碼我使用）：jQuery在使左值動畫時縮小填充？奇怪

<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>每次都關閉。

任何解釋爲什麼會發生這種情況？

來源

2010-10-20 Stefan P

我想這和工作原理下：

要麼改變UL位置到絕對

或動畫等 $('ul').animate({left: '-=520'+"px"}

20像素僅加入歌劇，在IE中，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>

來源

2010-10-20 11:52:07 samrockon

我認爲填充添加到寬度，所以它會是540px？ – 2010-10-20 11:57:03

如果div寬度是500px，並且填充20px，則所有子元素的寬度將爲460px。所以你只能看到每個li元素的第一個460px。 – samrockon 2010-10-20 12:05:18

你應該改變div寬度爲540px或刪除填充或設置li寬度爲460px – samrockon 2010-10-20 12:06:14

我猜滑動不讚賞父母的填充。請注意，你滑動的東西，ul，根本沒有任何填充。

嘗試在ul上設置填充而不是容器。

來源

2010-10-20 11:49:35 EMMERICH

是的，我只是覺得很奇怪jQuery如何讓這有點混亂！如果ul有填充的話，它在整個li中不會很普遍，我認爲在這種情況下最好的做法是給每個li添加填充，然後滑動width和padding的總值，假定jQuery沒有做這裏每個人都一樣。不管怎麼說，還是要謝謝你！ – 2010-10-20 11:55:19

當您從寬度減去460px時，在第一個div中有20px左側+ 20px右側= 40px填充。

填充單位與元素的寬度。如果您刪除填充或增加寬度，應該這樣做。
最好的問候

來源

2010-10-20 11:52:32 Myra

jQuery在使左值動畫時縮小填充？奇怪

回答

相關問題