The difference between the methods of showing and hiding elements in jquery

In the actual project development, there are many ways to make an element hidden, such as CSS's various properties and jquery's various methods, although their role is to make the element invisible, but the principle of the implementation of each method is not the same. The following focuses on the differences between the various elements of jquery hiding methods.

1. Show () and Hide ()

Hiding an element using the Hide () method actually reduces the height, width, and opacity of the element at the same time, until the three properties are 0 and the CSS property of the element is disolay:none. The show () method increases the height of the element from top to bottom, increasing the width of the element from left to right, while increasing the opacity of the content until the element is fully displayed.

2, FadeIn () and fadeout ()

Both of these methods only change the opacity of an element when it is hidden or displayed.

3, Slideup () and Slidedown ()

Both of these methods change the height of an element when it is hidden or displayed. Slidedown () is displayed from top to bottom, Slideup () is hidden from bottom to top.

The above three methods can be passed two parameters, the first parameter is the element display or hidden over-effect, you can pass the specific time value, you can also pass the method to show the hidden value of the display, the second is the callback function, after the element is displayed or hidden to perform other operations.

In addition to the methods described above, the animate () method of jquery can also be used to hide elements, the principle of which is to use CSS properties. The method can accept three parameters, the first is a CSS property, the second is an over effect, and the third is a callback function.

The difference between the methods of showing and hiding elements in jquery