Question

我想知道是否有一种更简单或更好的方式来编写一个JQuery动画，该动画会在某一点之后触发。

我目前的代码看起来像;

HTML

<div class="div">
        <div id="box"></div>
    </div>

脚本

$(document).scroll(function() {
        var scrolled = $(document).scrollTop();

        if(scrolled > 300) {
            $("#box").css("margin-left", "300px");
        } else {
            $("#box").css("margin-left", "0px");       
        }
    });

此外，您还需要添加不同的时间来完成每个动画，而不是添加.css("transition", "all 2s");

Answer 1

TL; DR：是的，有多种方法可以从jQuery，JavaScript和CSS中启动转换。

有几种方法，我在以下JSFiddle中展示了它们，您可以根据需要评论/取消注释我的代码，以查看使用转换的两种不同方法。

第一个选项

的jQuery

$('#box').addClass("margin-left-300");

CSS：

 transition: 2s all ease;

当与删除类的能力相结合时，它将允许CSS在jQuery中尽可能少地干扰。

第二选项

jQuery的：

$('#box').animate({marginLeft: "300px"}, 1000)

这将允许jQuery在必要时对转换进行操作，并指定转换中应该发生的事情，以及转换应该持续多长时间。

什么更好？

老实说，我目前正在开发一个相当大的SPA（单页面应用程序），需要大量的过渡和动作。我犯了一个愚蠢的错误，试图只使用jQuery来制作我的动画，这有时被证明是不可靠和不连贯的。

以下是一篇解释CSS和Javascript之间区别的文章：

CSS Animations vs JQuery Animations

在我看来，我认为最好尽可能快地限制jQuery干扰CSS转换的数量，除非你打算使用一个优于原生CSS的JavaScript库。

有没有更简单的方法来编写scrollTop动画？

1 个答案:

第一个选项

第二选项