jquery Show () and hide () Let the elements move

Basic usage

Show () method
Shows the hidden <p> elements.

The code is as follows	Copy Code
$ (". Btn2"). Click (function () { $ ("P"). Show (); });

Hide () hides the visible <p> elements:

The code is as follows	Copy Code
$ (". Btn1"). Click (function () { $ ("P"). Hide (); });

let the elements move.

The jquery code is as follows:

The code is as follows	Copy Code
$ ("element"). Show ("slow");

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

Not only that, you can also specify a number for the display speed, in milliseconds.

For example, use the following code to make the element appear within 1 seconds (1000 milliseconds);

$ ("element"). Show (1000); In the previous example, replace the Hide () method with the Hide (), and put (600) instead.

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); }) });

From the execution of your code, you can see that the Hide (600) method reduces the height, width, and opacity of the content at the same time, until the 3 property has a value of 0, and the CSS rule for the element is "Display:none."

show/hide Performance Test

Test data

Used as a test is an HTML page with 100 Div, with class and some content

The jquery version used as a test is 1.4.2, so the test results are only for this version, which may not be the result in other versions.
The jquery methods that were tested were:

. Toggle ()
. Show () and. Hide ()
. css ({' Display ': ' None '}) and. css ({' Display ': ' Block '})
. addclass (' hide ') and. Removeclass (' hide ')

Change an attribute of a <style> element

. Show () and. Hide ()

In all browsers, these two methods are relatively slow to hide DOM elements. The main reason is that. The hide () method must first save the element's "display" property so that the. Show () can restore the element to its original state. Here we use the. Data () jquery method to store the information on the DOM element. For this purpose,. Hide () loops two times on each element, once to save the current "display" value, once to update the style "display" to "none". Based on the comments on the source code, this is done to prevent the browser from rendering on each loop (reflow). The Hide () method also checks whether you pass parameters that use animation effects, even if passing in a "0" can also give you a significant performance discount. The slowest performance occurs the first time the. Hide () is invoked, and then the call becomes faster.

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

. Toggle ()

This method is the slowest. It checks whether each element returned by the selector is currently visible, calls the. Hide () method if it is visible, and calls the. Show () method. Not only that, it will check whether you pass a Boolean value in to block. Hide () or. Show (), and check to see if you passed in a function to switch (toggle) instead of the visibility. There seems to be a lot of room for improvement, for example, you can select the hidden elements one at a time, and then call the. Show () method, and select the remaining elements to invoke the. Hide () method.

Browser Hide/show

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