jQuery動畫最大寬度溢出問題

Question

我使用了一小段jquery，它只做一個div動畫，看起來像是從屏幕外移動到父div中所需的位置。

$(document).ready(function() 
{$(".tv").animate({marginLeft:"50px"},700); 

爲了開始屏幕外我確保父div將達到最大寬度值和最小寬度值的屏幕一側。然後，我將子div設置爲margin-left 100％，我認爲這是相對於父級的當前寬度，但顯然不是。用最大寬度，孩子從父母的邊緣開始，沒有溢出問題。但是，當使用最小寬度或窗口不夠寬時，孩子仍會從最大寬度位置開始動畫，併產生溢出。

.col2 { 
position:relative; 
max-width:1200px; 
min-width:400px; 
height:600px; 
margin-left:0px; 
float:left; 
overflow:hidden; 
} 

.tv { 
margin-left:100%; 
height:224px; 
width:374px; 
background-image:url('image/tv.png'); 
display:block; 
} 

雖然我知道用這個百分比無縫工作，對必須保持相同的寬度在屏幕的左側一列，所以據我知道這是不是一種選擇。我也想避免刪除整個文檔的溢出。

我想有幾行jQuery或JavaScript我可以用來設置孩子的屬性來匹配父母的當前寬度，而不是父母的最大寬度，但我不知道如何測量當前寬度。除此之外，我沒有看到其他解決方案沒有在動畫製作時禁用溢出，但這看起來並不理想。

有什麼建議嗎？

Answer 1

將.tv設置爲position：absolute會將其從box模型中移除，並且不會調整其父div的大小。給它一個荒謬的左值將確保它在頁面加載時脫離屏幕。

.tv { 
height:224px; 
width:374px; 
background-image:url('image/tv.png'); 
position: absolute; 
left: 10000px 
} 

然後用JS動畫左邊的值應該給你同樣的效果，而不會造成溢出的問題。在它動畫之前，它將左邊的值設置爲父div的寬度，所以它不會從它初始化的荒謬左值開始動畫。

$(document).ready(function() { 
    $(".tv") 
     .css("left", $(".col2").width()) 
     .animate({left:"50px"},700); 
});