jQuery和纯CSS隐藏元素的区别

Question

jQuery和纯CSS隐藏元素的区别

3

我知道jQuery和JavaScript没有真正的区别，因为jQuery是JavaScript库，但是我测试过并编写了一个隐藏元素的函数。我使用了jQuery库，虽然代码相同但是两个元素隐藏的时间略有不同，纯JavaScript版本运行速度稍快一些。

function test() {
  var a=document.getElementById("test");
  a.style.width="0px" 
  a.style.height="0px"
  a.style.opacity="0"
}

function abc() {
  $(document).ready(function() {
    $('#jQtest').hide(1000)
  });
  test();
}

#test{
  width:200px;
  height:200px;
  border:1px solid black;
  background-color:#36F;
  transition:1s;
}
#jQtest{
  width:200px;
  height:200px;
  border:1px solid black;
  background-color:#36F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="button" id="but" value="hide show" onclick="abc()"/>
<div id="test"></div>
<div id="jQtest"></div>

Fiddle：jQuery与CSS对比。

- user3781284

这是一个问题吗？你在隐藏中设置持续时间为1000的原因是什么？尝试使用.hide()。 - Rob Schmuecker

为什么要用jQuery强制将动画持续1000毫秒（默认为400毫秒）？ - Marios Fakiolas

@RobSchmuecker 和 marios，如果你们查看 #test 的 CSS 过渡速度，你会发现它是 1 秒，这应该与 hide(1000) 相同，但显然提问者想知道为什么速度不一样。 - Kris Erickson

@RobSchmuecker 缓动效果是其中的一部分（jQuery 默认为 Swing，CSS 默认为 linear），但 jQuery 还依赖于 setTimeout 而不是浏览器和 GPU 内置的动画，这些动画可以通过 CSS 过渡提供。此外，请不要链接到 w3schools，使用 MDN 或其他任何内容，因为给 w3fools 提供更多谷歌搜索排名会对网络造成积极的伤害 :) - Kris Erickson

@KrisErickson 同意，w3fools并不理想 :-( 抱歉：现在已经修复了。关于setTimeout与本地浏览器和GPU的有趣见解。啊，好的 - 虽然我认为它们实际上是相同的速度，但更多是缓动/过渡时间问题 https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function 如果有人想要OP的问题演示，可以看这个jsfiddle.net/robschmuecker/yj7F5 - Rob Schmuecker

2个回答

0

使用纯JavaScript通常比使用额外的库如jQuery、Greensock、Angular等更快（有时不明显，但对于大量/多个动画更为明显）。

在Chrome中，右键单击jQtest div并检查元素，然后单击您的“隐藏显示”按钮，您可以注意到jquery在播放动画时始终操作div的样式（宽度、高度等）每一步直到完全隐藏。

视觉差异不大，但jQuery的超级能力使得这个简单的动画在（大多数）所有浏览器中都能工作。

- evilReiko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kris Erickson · Accepted Answer

CSS动画比jQuery动画更精确（直到它转移到CSS动画），并且出于许多其他原因而更可取，不仅限于它由GPU提供动力，因此需要更少的资源。我有一段时间没有浏览过jQuery源代码了，但上次查看时，它仍在使用setTimeout而不是更精确的requestAnimationFrame，即使那时它也是依靠浏览器中断来驱动动画，而不是像CSS动画那样拥有更低级别的功率。因此，除非必须使用，否则请使用CSS动画（即使它们比jQuery动画更麻烦一些）。有一些jQuery插件可以简化CSS过渡，例如Transit。