Dom Animations in jquery

No animation effects hidden and displayed

Hide (): In an HTML document, calling the Hide () method for an element changes the display style of the element to none.

The code function is the same as the CSS ("display", "none").

Show (): Changes the display style of an element to its previous state.

Toggle (): Toggles the visible state of an element: Toggles to hidden if the element is visible, and toggles to visible if the element is hidden.

Animate the fade by setting the transparency effect's hide and display

FadeIn (), FadeOut (): Changes the transparency of the element only.

FadeOut () reduces the opacity of the element for a specified period of time until the element disappears completely.

FadeIn () is the opposite.

For example, use 600 milliseconds to fade the paragraph slowly: $ ("P"). FadeIn ("slow");.

FadeTo (): Adjusts the opacity in an asymptotic manner to the specified value (between 0–1). and optionally trigger a callback function after the animation is complete.

For example, with 200 milliseconds to quickly adjust the transparency of a paragraph to 0.25, after the animation is finished, a "Animation done" message box is displayed:

"$ (" P "). FadeTo (" Fast ", 0.25, function () {

Alert ("Animation done.");

});”

The animation effect of slide down and drop is achieved by setting the hidden and display of the height effect.

Slidedown (), Slideup (): Only the height of the element is changed.

If the display property of an element is none, the element will be extended from top to bottom when the Slidedown () method is called.

The Slideup () method is just the opposite, and the elements are hidden from bottom to top.

For example, slide the paragraph down in 600 milliseconds slowly: $ ("P"). Slidedown ("slow");

Slidetoggle (): Toggles the visibility of matching elements by a height change.

For example, 200 milliseconds to quickly slide the paragraph up or down, after the animation finishes, a "Animation done" message box is displayed: "$ (" P "). Slidetoggle (" Fast ", function () {

Alert ("Animation done.");

});”

Dom Animations in jquery