Jquery show () and hide () Let the elements move

In jquery, I can directly use show () and hide () to display and hide elements. This is easier than the operations in js. At the same time, show () and hide () you can also set parameters so that our operation has a cache effect. I will introduce it to you later.

Basic usage

Show () method
The hidden <p> element is displayed.

The Code is as follows:	Copy code
$ (". Btn2"). click (function (){ $ ("P"). show (); });

Hide () hides visible <p> elements:

The Code is as follows:	Copy code
$ (". Btn1"). click (function (){ $ ("P"). hide (); });

Let the elements work

The jQuery code is as follows:

The Code is as follows:	Copy code
$ ("Element"). show ("slow ");

After running the code, the elements will be displayed slowly within 600 milliseconds. Other speed keywords include "normal" and "fast" (400 ms and 200 ms respectively ).

In addition, you can also specify a number for the display speed, in milliseconds.

For example, use the following code to display elements in 1 second (1000 milliseconds;

$ ("Element"). show (1000); in the previous example, change the hide () method to hide (600) and show () method to show (600 ).

The jQuery code is as follows:

The Code is as follows:	Copy code
$ (Function (){ $ ("# Panel h5.head"). toggle (function (){ $ (This). next (). hide (600 ); }, Function (){ $ (This). next (). show (600 ); }) });

During code execution, we can find that the hide (600) method reduces the height, width, and opacity of the "content" until the values of the three attributes are 0, finally, set the CSS rule for this element to "display: none ".

Show/hide performance test

Test Data

For testing, an HTML page containing 100 divs contains class and some content.

The jQuery version used for testing is 1.4.2. Therefore, the test results are only for this version. Other versions may not have these results.
The jQuery method is as follows:

. Toggle ()
. Show () and. hide ()
. Css ({'display': 'none'}) and. css ({'display': 'block '})
. AddClass ('hide ') and. removeClass ('hide ')

Modifies an attribute of the <style> element.

. Show () and. hide ()

In all browsers, these two methods are relatively slow in hiding DOM elements. The main reason is that the. hide () method must first save the "display" attribute of the element so that. show () can restore the element to its original state. The jQuery method of. data () is used to save the information on the DOM element. To achieve this goal,. hide () loops twice on each element, one to save the current "display" value, and one to update the style "display" to "none ". According to the comments in the source code, this is done to prevent the browser from re-rendering (reflow) on each loop ).. The hide () method also checks whether you have passed the parameters that use the animation effect. Even if you input a "0", the performance will be greatly compromised. When. hide () is called for the first time, the performance is the slowest, and then the call will become faster.

Browser hide/show
FireFox 3.6 29 ms/10 ms
Safari 4.05 6 ms/1 ms
Opera 10.10 9 ms/1 ms
Chrome 5.0.3 5 ms/1 ms
Internet Explorer 6.0 31 ms/16 ms
Internet Explorer 7.0 15 ms/16 ms

. Toggle ()

This method is the slowest. It checks whether each element returned by the selector is visible. If visible, the. hide () method is called. If invisible, the. show () method is called. In addition, it will not only check whether you have passed a boolean value to block it. hide () or. run show () and check whether you have passed in the function for toggle instead of for visibility switching. It seems that this method still has a lot of room for improvement. For example, you can first select the hidden elements and then call them. show () method, and select other elements to call. hide () method.

Browser hide/show

FireFox 3.6 80 ms/59 ms
Safari 4.05 24 ms/30 ms
Opera 10.10 67 ms/201 ms
Chrome 5.0.3 55 ms/20 ms
IE 6.0 296 ms/78 ms
IE 7.0 328 ms/47 ms