Question

我发现视觉效果非常沉闷，并且倾向于导入免费的jquery插件来制作动画。但是，因为我比javascript更了解CSS，所以我非常喜欢纯CSS代码。

问题是，不使用jquery有一个主要优势吗？我是否真的通过消除jquery但加入50行CSS来加快加载时间？还是完全错了？我真的没有使用jquery的问题，但我发现自己正在寻找那些纯粹的CSS技术，因为少即是多。

我想从人们的经验中比较CSS和jquery。并且不要让我了解jquery如何比CSS可以做的更多，甚至不应该比较它们。我只谈论动画和视觉效果，就CSS而言，所以在css领域使用jquery。

最后一个问题，一种奖金问题，但我首先要问这个问题。有没有办法创建一个CSS滑块，无论有多少存在？换句话说，我可以为下一个事件设置一个时间，而不是为每个图像设置单独的时间吗？我使用php循环来填充从数据库中拉出图像路径的滑块，所以如果我自己或我的一个同事添加了太多图像，css滑块总是吓坏了，但jquery的处理它就好了。

我期待听到大家对此的看法。

Answer 1

CSS和jQuery（视觉效果）都有优点和缺点。

CSS

CSS会更快，因为它的布局引擎（Blink，Gecko，Trident）是用C ++实现的。你仍然可以写低效的选择器; see here有关如何改进它们的提示。
较新的[CSS3]功能在IE8中不可用。您将无法访问动画或过渡，因此您必须优雅地降级或实现JavaScript回退。
- 然而，有人可能会说这种影响无论如何都是多余的。
CSS中没有变量或数学。使用像SASS或LESS之类的预处理器可以解决这个问题，虽然您可能应该使用预处理器，但它确实会为您的工作流程增加额外的复杂性，因此请巧妙地进行管理。
另请参阅一些特定的Limitations和Advantages。

的jQuery

jQuery会慢一点，因为它是用JavaScript实现的。
从CDN加载jQuery的加载时间会有所改善：<script src="//code.jquery.com/jquery-1.10.2.min.js">。很多开发人员也使用CDN，因此客户端很可能已经拥有该脚本的缓存版本并获得304 Not Modified。
几乎所有jQuery的[1.x分支]功能都应该跨浏览器工作。
jQuery可以将任何CSS样式应用于元素以及它自己的JavaScript视觉效果，使它更加通用。

jQuery的一些视觉效果使用CSS（比如隐藏和显示），有时会使它有些多余。（虽然jQuery也跟踪可见性状态，但是你不能在CSS中做，因为你没有事件处理程序的变量或回调。）

我建议对于视觉效果，你总是首先寻求跨浏览器的IE8 + CSS解决方案，以提高速度。如果没有这样的解决方案，请使用jQuery，或者采用更简单的设计/功能。

还要记住，通过使用jQuery，您可以将执行速度与开发速度进行交换。你不一定会牺牲jQuery提供的任何视觉效果，因为它们仍然可以在原始JavaScript中使用。但是你需要重新实现它们，所以你也可以使用经过充分测试和记录良好的库。

Answer 2

transition: opacity 1s ease-in-out;        // Work time
-webkit-transition: opacity 1s ease-in-out; // less time spent with family
-moz-transition: opacity 1s ease-in-out;    // less time spent with family
-ms-transition: opacity 1s ease-in-out;     // less time spent with family
-o-transition: opacity 1s ease-in-out;      // less time spent with family

VS

var fadeTime = 1000;                        // and all the time in the world

当你能够用原生风格f.e：

.el:click{
    animate: left calc(counter * .el<@width) 0.3s "ease-in-out";
    /* where "<" is for parent :) */
}

......分开，

CSS3 仍然是非模块化的，缺少事件不一致和动画过渡不稳定，
尚未在所有生活浏览器中识别，
维护^（2013），
几乎所有现存的CSS3库都使用一些JS代码来补偿触发器，动作等等，所以我认为所有那些实验主要是个人成就，试图获得一些阳光。
所以你最终会两个一个巨大的CSS3脚本，并依赖于一些JS代码来处理（主要）actiion事件。

JS （jQuery 是 JS）和动画，使用requestAnimationFrame让你告诉浏览器在最合适时执行重绘，节省电池，它是在标签不活动时暂停，它由浏览器处理（类似于CSS过渡/动画），浏览器可以对其进行优化，使动画快速且流畅！[/ li>
最新的jQuery版本已经注意提供最佳性能。
您可以在几行jQuery中构建淡入淡出库，而不是100多行CSS3脚本，好吧，您必须加载一些kb库，但为什么不这样。
您构建（或下载）的插件将轻松让您处理单独的动画时间，效果，样式，但只需添加/更改一个属性值，使代码保持最少。
节省您的时间。对你，你的宠物以及将要跟随你的人都有。

_{永远不要忘记跟上 CSS 这真是太棒了，关于它的好处还有待发展。}

Answer 3

我发现JQuery更适合控制和响应用户操作，操纵框模型中的属性，以及基于CSS轻松访问页面上的组件。这有点强了。 JQuery中的动画功能也相当不错，不过它们中的大多数都只是类似CSS的预设。

如果您正在寻找一种有趣的方式来制作动画而不使用太多JQuery，并且您喜欢CSS，那么您应该在https://daneden.me/animate/

查看animate.css

CSS vs Jquery，滑块，动画，灯箱......加载时间与功能？

3 个答案:

CSS

的jQuery