我应该使用/避免使用 jQuery 动画吗？ [关闭]

Posted 2023-03-06

【中文标题】我应该使用/避免使用 jQuery 动画吗？ [关闭]

【英文标题】：Should I use/avoid jQuery animate? [closed]

【发布时间】：2016-09-23 13:27:59

【问题描述】：

回答this one 时突然想到一个问题，OP 想在其中应用此转换：

test.css(transition: 'height 1s linear', height: '100px');

然后回到这个：

test.css(transition: 'none', height: '0px');

他说他需要从js中完成，并要求更好的想法，所以我提供了这种方法：

test.animate(height: '100px', 1000, 'linear', function()
    test.css(transition: 'none', height: '0px');
);

这是我的 jsFiddle：https://jsfiddle.net/mqaunyvp/1/

@Matrix 评论说 JS 和 jQuery 动画不如原生 CSS 优化，这是正确的，但我认为这不是主题。

那么问题来了：

按照我建议的方式完成这项工作是否正确？或者你会反对它吗？为什么？

【问题讨论】：

jQuery中的动画实现效率不是很高，但是velocity.js有类似的API，而且要好很多。

我可以同意@Pointy，velocity 非常好和高效。但是，如果您的动画保持简单而不过多，jQuery 也会做得很好。

谢谢@Pointy。我很少在屏幕上移动东西，但有时你必须这样做。那么，拥有（就它们是少数且简单的）js 动画而不是尝试全部使用原生 CSS 来完成这一切并不是一个坏习惯？

也感谢@linusg，任何后续的cmet将不胜感激。

而像移动对象这样的事情用 JS 更容易。我只是建议在文本/链接动画、悬停动作或菜单扩展等方面使用 CSS。

【参考方案1】：

所有cmets的一个结论：

jQuery 不是为动画对象创建的，因此它可能会很慢且滞后（取决于您要制作动画的内容和数量）。但是，在大多数情况下，使用 jQuery 的 .animate() 函数滚动页面非常有效。

对于更高级的动画（如移动物体或同时制作复杂或多个动画），使用库作为velocity。

如果您只想为文本样式/颜色或下拉菜单设置动画，使用 CSS 过渡/动画会更快（也更容易 IMO）。 p>

所以这取决于你在做什么。希望这会有所帮助！