Difference between jQuery and pure css for hiding a element

Question

I know there is no true difference between jQuery because jQuery is a JavaScript library but I tested and wrote a function to hide a element and I used jQuery its has a little difference between the time that the two element hides and the pure JavaScript version finishes a little faster while the code is the same whit different tools

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 VS CSS.

This is a question?! Any reason why you have a duration of 1000 in the hide? try .hide() — Rob Schmuecker
– Rob Schmuecker, Commented Jul 20, 2014 at 19:35
Why do you force the animation to last for 1000 msecs with jQuery (default 400 msecs)? — Marios Fakiolas
– Marios Fakiolas, Commented Jul 20, 2014 at 19:39
@RobSchmuecker and marios if you look at the transition speed in the CSS for #test you will see it is 1s, which should be the same as the hide(1000), but apparently the questioner is wondering why it isn't the same speed. — Kris Erickson
– Kris Erickson, Commented Jul 20, 2014 at 21:06
@RobSchmuecker the easing is part of it (jQuery defaults to Swing and CSS defaults to linear), but also jQuery relys on setTimeout rather than built in animation of the browser and GPU that CSS transitions provide. Also, please don't link to w3schools, use MDN or anything else, giving w3fools any more Google juice than it already has actively harms the web :) — Kris Erickson
– Kris Erickson, Commented Jul 20, 2014 at 21:24
@KrisErickson Agreed, w3fools is hardly ideal :-( Apologies: Fixed now. Interesting insight about the setTimeout vs native browser and GPU though. Ah yes, ok - although I think they are in fact the same speed but more a question of easing / transition-timing developer.mozilla.org/en-US/docs/Web/CSS/… Demo of OP's issue if anyone wants it jsfiddle.net/robschmuecker/yj7F5 — Rob Schmuecker
– Rob Schmuecker, Commented Jul 20, 2014 at 21:27

Kris Erickson · Accepted Answer · 2014-07-20 21:18:57Z

1

CSS animation is going to be more accurate than jQuery animation (until it moves to CSS animation) and is preferable for many other reasons, not limited to the face it is powered by the GPU so it takes a lot less resources. I haven't walked through the jQuery sources in a while, but the last time I looked it was still using setTimeout rather than the more accurate requestAnimationFrame, but even then it is relying on browser interrupts to power the animation rather than the more low level power CSS animations have. So unless you have to, use CSS animations (even though they are a little more work than jQuery animation). There are some jQuery plugins that simplify CSS transitions, for example Transit.

answered Jul 20, 2014 at 21:18

Kris Erickson

34k27 gold badges122 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

evilReiko · Accepted Answer · 2017-10-26 13:04:02Z

0

Pure JavaScript is always going to be faster (sometimes not noticeable, but for big/many animations more noticible) rather than using additional library like jQuery, Greensock, Angular, etc.

In Chrome, right-click jQtest div and inspect element, then click your "hide show" button, you can then notice that jquery is consistently manipulating the div's styling while the animation is playing (width, height, etc) for each step until it completely hides.

Visual difference is not much, but jQuery's superpower allows this simple animation work in (mostly) all browsers.

answered Oct 26, 2017 at 13:04

evilReiko

20.6k24 gold badges93 silver badges110 bronze badges

Collectives™ on Stack Overflow

Difference between jQuery and pure css for hiding a element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related