Difference between jQuery s hide and setting CSS to display none

Question

Which am I better off doing   hide   is quicker than writing out  css  display    none    but what   s the difference and what are both of them actually doing to the HTML element

User · Answer

They are the same thing   hide   calls a jQuery function and allows you to add a callback function to it  So  with  hide   you can add an animation for instance     css  display   none   changes the attribute of the element to display none  It is the same as if you do the following in JavaScript   document getElementById  elementId   style display    none     The  hide   function obviously takes more time to run as it checks for callback functions  speed  etc

User · Answer

From the jQuery page about  hide         The matched elements will be hidden immediately  with no animation  This is roughly equivalent to calling  css  display    none    except that the value of the display property is saved in jQuery s data cache so that display can later be restored to its initial value  If an element has a display value of inline  then is hidden and shown  it will once again be displayed inline     So if it s important that you re able to revert to the previous value of display  you d better use hide   because that way the previous state is remembered  Apart from that there s no difference  x000D   x000D    function     x000D          hide   click function    x000D              toggle   hide    x000D          setDisplayValue    x000D          x000D          show   click function    x000D              toggle   show    x000D          setDisplayValue    x000D          x000D      x000D   x000D  function setDisplayValue     x000D      var display       toggle   0  style display  x000D          displayvalue   text display   x000D    x000D  div   x000D      display  table-cell  x000D      border  1px solid  x000D      padding  5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p gt  x000D       lt button class  hide  gt Hide lt  button gt  x000D       lt button class  show  gt Show lt  button gt  x000D   lt  p gt  x000D   x000D   lt div class  toggle  gt Lorem Ipsum lt  div gt  x000D   x000D   lt p gt  x000D      The display value of the div is  x000D       lt span class  displayvalue  gt  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Both do the same on all browsers  AFAIK  Checked on Chrome and Firefox  both append display none to the style attribute of the element

User · Answer

hide   stores the previous display property just before setting it to none  so if it wasn t the standard display property for the element you re a bit safer   show   will use that stored property as what to go back to   So   it does some extra work  but unless you re doing tons of elements  the speed difference should be negligible

User · Answer

Looking at the jQuery code  this is what happens    hide  function  speed  easing  callback         if   speed    speed     0             return this animate  genFx  hide   3   speed  easing  callback          else           for   var i   0  j   this length  i  lt  j  i                   var display   jQuery css  this i    display                  if   display      none                      jQuery data  this i    olddisplay   display                                        Set the display of the elements in a second loop            to avoid the constant reflow         for   i   0  i  lt  j  i                   this i  style display    none                      return this

User · Answer

See there is no difference if you use basic hide method  But jquery provides various hide method which give effects to the element  Refer below link for detailed explanation  Effects for Hide in Jquery

User · Answer

To use both is a nice answer  it s not a question of either or    The advantage of using both is that the CSS will hide the element immediately when the page loads  The jQuery  hide will flash the element for a quarter of a second then hide it     In the case when we want to have the element not shown when the page loads we can use CSS and set display none  amp  use the jQuery  hide    If we plan to toggle the element we can use jQuery toggle

[javascript] Difference between jQuery’s .hide() and setting CSS to display: none

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to show-hide