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>

溢出：隐藏不会在左边的.animate（）上工作，但是向右工作？

1 个答案: