Shulou(Shulou.com)05/31 Report--

This article focuses on "what are the jquery animation functions", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn what are the jquery animation functions!

There are 17 jquery animation functions: 1, animate (), used to apply custom animation to the selected element; 2, hide (), used to hide the selected element; 3, show (), used to display the selected element; 4, fadeOut (), used to hide the element by setting opacity, 5, fadeTo (), and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery animation function

The following table lists all the jQuery methods used to create animation effects.

The method describes that animate () applies "custom" animation clearQueue () to the selected element to remove all queuing functions (not yet running) delay () sets delay dequeue () for all queuing functions (still not running) to remove the next queuing function, and then executes the function fadeIn () to gradually change the opacity of the selected element, from hidden to visible fadeOut () gradually change the opacity of the selected element From visible hidden fadeTo () gradually changes the selected element to a given opacity fadeToggle () toggles between the fadeIn () and fadeOut () methods finish () stops the selected element, Remove and complete all queued animation hide () hide selected element queue () display selected element queue function show () Show selected element slideDown () switch between the selected element slideToggle () slideUp () and slideDown () methods slideUp () slides to hide the selected element stop () to stop the animation toggle currently running on the selected element by adjusting the height Switching between hide () and show () methods

Here are some common animation functions.

1. Animate ()

The animate () method performs a custom animation of the CSS property set.

This method changes an element from one state to another through the CSS style. The value of the CSS property changes gradually so that you can create an animation effect.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

Tip: use "+ =" or "- =" to create relative animation.

Example: apply animation to an element by changing its height:

$(document) .ready (function () {$("# btn1") .click (function () {$("# box") .animate ({height: "300px"}) }) $("# btn2") .click (function () {$("# box") .animate ({height: "100px"}) }); reset height using animation to zoom in

2. Hide (), show () and toggle ()

The hide () method hides the selected element.

Show () displays the selected element

Toggle (): switching between hide () and show () methods

Example: hide or show

element

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .ready ();}) $(".btn2") .click (function () {$("p") .show ();})

This is a paragraph.

Hide display

3. SlideUp (), slideDown () and slideToggle ()

The slideUp () method: hides the selected element in a sliding manner.

The slideDown () method: displays the selected element in a sliding manner.

SlideToggle () method: switching between slideUp () and slideDown () methods

Example: hide in a sliding manner

element

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .ready ();}) $(".btn2") .click (function () {$("p") .slideDown ();})

This is a paragraph.

Slide up and down

4. FadeIn (), fadeOut () and fadeToggle ()

The fadeIn () method gradually changes the opacity of the selected element from hidden to visible (fade effect).

The fadeOut () method gradually changes the opacity of the selected element from visible hiding (fading effect).

FadeToggle (): switching between fadeIn () and fadeOut () methods

Example: display using the fade effect

element

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .fadeOut ()}) $(".btn2") .click (function () {$("p") .fadeIn ();})

This is a paragraph.

Fade in

5. FadeTo ()

The fadeTo () method gradually changes the opacity of the selected element to the specified value (fade effect).

$(document) .ready (function () {$("button") .click (function () {$("p"). FadeTo (1000, 1000);}) Gradually change the opacity of element P

This is a paragraph.

At this point, I believe you have a deeper understanding of "what are the jquery animation functions?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.