JQuery animation effect and animation queue

Base effect. Hide ([duration] [, easing] [, complete])

Used to hide elements, which is equivalent to setting the display property directly without parameters

$('.target').hide()//等同于$('.target').css('display', 'none')

. Show ()

Used to display elements, usages, and hide similar

$('#btn-box1').on('click',function(){ $('.box').show('normal')})

. Toggle ()

Used to toggle the hiding and display of elements, similar to toggleClass , usages, and show hide similar

Gradient effect. FadeIn ()

Display matching elements in a fade-in fashion

$('#btn-box3').on('click',function(){ $('.box').fadeIn()})

. FadeOut ()

Display matching elements in a fade-out manner

$('#btn-box4').on('click',function(){ $('.box').fadeOut()})

. FadeTo ()

Adjusts the transparency of matching elements by animating the opacity of the matched element

$('#book').fadeTo('slow', 0.5, function() { // Animation complete.});

Slide effect. Slidedown ()/. Slideup ()

Display a matching element with a sliding animation

$('#btn-box5').on('click',function(){ $('.box').slideDown()})$('#btn-box6').on('click',function(){ $('.box').slideUp()})

Callback Synchronous vs. asynchronous

As in the following cases

Callback synchronization

That is, after the end of the entire animation, the 'hide' synchronization

$('#btn-box1').on('click',function(){ $('.box').hide('normal', funciton(){ console.log('hide') })})

Asynchronous

That is, whenever an event triggers an instant (that is, by pressing BTN), it appears as 'hide' an asynchronous

$('#btn-box1').on('click',function(){ $('.box').hide('normal') console.log('hide')})

Refer to the case in demo Case 1 for details

$(' #action1 '). On (' Click ',function){var $box = $ ('. Box ')Callback Hell $box. Hide (1000,function{$box. Show (1000,function) {$box. FadeOut (' Slow ',function) {$box. FadeIn (' Slow ',function) {$box. Slideup (function) {$box. Slidedown (function){Console.log (' Animation execution complete ') $ (' #wrap1 '). Text (' Animation completed ')})})})}) $ (' #action2 '). On (' Click ',functionvar $box = $ ( '. Box ') //uses the jquery animation queue notation $box. Hide (1000). Show (1000). FadeOut ( ' slow '). FadeIn ( ' slow '). Slideup (). Slidedown (function (console.log ( ' really executed ') $ ( ' # Wrap2 '). Text ( ' really done ') //last synchronous callback}) console.log ( is the animation complete? ') //animation is just beginning, when the animation queue is created, the output of this sentence, asynchronous $ ( ' #wrap2 '). Text ( is the animation complete? ')}) 

JQuery Animation queue

The animation queue is a sequential mechanism for animation execution, and when we add multiple animations to an object, the added action is placed in the animation queue, and the previous animation is completed before it starts executing.

Animation queue mechanism and execution order

1. For animation effects on a set of elements, there are two things:

• When animate() multiple properties are applied in a method, the animation occurs at the same time.
• When the animation method is applied in a chained way, the animation occurs in sequence.

2. For animation effects on multiple groups of elements, the following is the case:

• By default, animations occur at the same time.
• When animation is applied in the form of callbacks, the animation occurs in the order of the callbacks.

That is, refer to the previous callback synchronous, asynchronous.

The above is the entire animation scheduling a process, in fact, the use of the queue asynchronous idle and then execute synchronous code, so that there is no waste of resources in processing, and the highest accuracy.

Custom animations

JQuery provides a way to customize animation behavior when basic effects, gradient effects, and slide effect animations don't meet your needs

. Animate (properties [, duration] [, easing] [, complete])

propertiesis a CSS property and value object that the animation will move according to this set of objects.

$ ( ' #btn4 '). Click (function () {$ (". Box '). Animate ({left:  150px '},1000). Animate ({ left:  ' 150px ', top:  150px '},1000). Animate ({left:  ' 0 ', top:  ' 150px '}, 1000). Animate ({left:  ' 0 ', top:  ' 0 '},1000)})      

. Clearqueue ()

Clear animations that are not performed in the animation queue

. Stop ([Clearqueue] [, Jumptoend])

Stop an animation that is currently running
The parameters inside

• Clearqueue: Is the .clearQueue() method that determines whether animations that are not executed in the animation queue are clear
• Jumptoend: The decision whether to show whether the current frame animation is executed to the last

Both of these parameters are by defaultfalse
That is .stop() equivalent to.stop(false,false)

. Stop (False,false)

There are 4 sequences in the animation sequence, when executed to the animation sequence 2 is used .stop() , sequence 2 stops immediately, and the animation sequence 3 is executed, after execution, the animation sequence 4 is executed.

After entering the demo click auto , click to .stop() see the effect

. Stop (True,false)

There are 4 sequences in the animation sequence, when executed to the animation sequence 2 is used .stop(true,false) , the sequence 2 stops immediately, because [clearQueue] the parameters are so that true the animation sequence is also all empty, no further down the animation sequence. So the animation stays where the animation sequence is 2 .stop(true,false) .

After entering the demo click auto , click to .stop(true,false) see the effect

. Stop (True,true)

There are 4 sequences in the animation sequence that are used when the animation sequence 2 .stop(true,true) is executed, because the parameter [clearQueue] is so that true the animation sequence is also emptied, and no further animation sequences are executed. Since the parameter [jumpToEnd] is also true , it will eventually stay where the animation sequence 2 itself should end.

After entering the demo click auto , click to .stop(true,true) see the effect

. Finish ()

Stops the current animation and clears all unfinished animations in the animation queue, finally showing the final state of the last frame of the animation queue

After entering the demo click auto , click to .finish() see the effect

Related cases

The basic effects, gradient effects, sliding effects, callback synchronization and async, and animation queues mentioned previously are included in the following demo cases
Demo Case 1

A custom Animation/animation Queue description is included in the following demo cases
Demo Case 2

Reference

JQuery API
JQuery Animation queue
Learn more about the JQuery animation queue