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

【问题标题】：Is there any easier way to write a scrollTop animation?有没有更简单的方法来编写 scrollTop 动画？
【发布时间】：2015-08-29 18:13:30
【问题描述】：

我想知道是否有更简单或更好的方法来编写在某个点后触发的 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");

【问题讨论】：

你能详细描述一下你到底想要做什么吗？
@alpha 抱歉，我只想知道有没有更好的方法来编写脚本？
如果您暗示要编写动画，我会使用 $("#box").animate({left: '300px'}, 2000);
@alpha 好的很酷，现在我可以控制速度了，但是现在它不会在 else 语句中返回，有什么想法吗？
不，你真的想离开 CSS 来完成它的工作，强迫 jQuery 实例化一些 CSS 转换真的没有意义。除非您使用一些 GPU 优化的 JavaScript 库，否则 jQuery 可能会比正常的 CSS 转换运行得更慢/滞后于您的页面。

标签： jquery html

【解决方案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 库。

【讨论】：

感谢您的深入了解，我帮了很多忙！！我一定会尽量减少我的 jQuery！