溢出：隱藏不在.animate（）左側，但在右側工作？

Question

我一直在閱讀，無法弄清楚這個動畫有什麼問題。

我正在嘗試做一個轉換，並在加載新內容之前將頁面的舊內容滑動到一邊。

我使用的是當前的代碼：

$('#clickbutton').click(function(e) { 
    $('#loader').css('overflow','hidden'); 
    $('#loader').animate({left: "100vw"},600, function(){ 
     $('#loader').empty(); 
     $('#loader').css("left", "0vw"); 
     $('#loader').css('overflow','auto'); 
     $('#loader').load('../viewers/docentes/docentes.lista.php'); 
    }); 
    }); 

裝載機是一個容器，身體的孩子，它的位置是相對的，身體已經沒有CSS從默認的變化分開。

奇怪的是，如果我將{left: "100vw"}更改爲{left: "-100vw"}，那麼容器動畫會改變方向，而不會出現滾動條。

爲什麼它不能正常工作？

Answer 1

您無法對未定位元素的left CSS屬性設置動畫。

但是你可以使用margin-left特性來實現你想要的。
負值margin-left會將元素向左推。

$('#clickbutton').click(function(e) { 
 
    $('#loader').css('overflow','hidden'); 
 
    $('#loader').animate({"margin-left": "-100vw"},600, function(){ 
 
     $('#loader').empty(); 
 
     $('#loader').css("margin-left", "0vw"); 
 
     $('#loader').css('overflow','auto'); 
 
     //$('#loader').load('../viewers/docentes/docentes.lista.php'); 
 
     $('#loader').html("New text is here!"); 
 
    }); 
 
    });

#loader{ 
 
    border:1px solid black; 
 
    width:400px; 
 
    height:400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" id="clickbutton"value="Click me"> 
 
<br> 
 
<br> 
 
<div id="loader"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta lorem quis gravida tempus. Fusce scelerisque vehicula ornare. Phasellus dapibus cursus augue, et accumsan lorem ultricies et. Aenean suscipit placerat nisl, congue elementum ligula porta ut. Duis lacinia lacinia augue, eu mattis lacus blandit eget. Quisque accumsan ante vitae porta interdum. Aliquam maximus ut est sed luctus. Sed sed orci in urna feugiat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non neque arcu. Nam cursus ultrices leo non egestas. Vivamus id nisi auctor, tempus urna eu, interdum risus. Nulla urna purus, porta et scelerisque at, pellentesque a erat. 
 
</div>