オーバーフロー：hiddenは左の.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>