Deep Learning of jQuery animation queue and deep learning of jquery queue

Deep Learning of jQuery animation queue and deep learning of jquery queue
Previous

Queue implementation is a great extension of jQuery. Using an animated queue can make the animation easier to implement. This topic describes the jQuery animation queue in detail.

 

Queue ()

The queue () method is used to display the executed function queues on matched elements.

Queue ([queueName])

The queue () method can accept an optional parameter-a string containing the queue name. This parameter is 'fx 'by default'

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn"> Start animation </button> <button id = "reset"> restore </button> <span id = "result"> </span> <div id = "box" style = "position: relative; height: 100px; width: 300px; background-color: lightblue "> </div> <script >$ ('# reset '). click (function () {history. go () ;}) $ ('# btn '). click (function (event) {setInterval (function () {queue ('{result'}.html ('number of Queues: '+ $ (' # box '). queue (). length)}, 100) $ ('# box '). animate ({'left': '100px '}, 1000 ). animate ({'width': '200p'}, 1000 ). animate ({'left': '0'}, 1000 ). animate ({'width': '100px '}, 1000) ;}); </script>

Queue (callback (next ))

The queue () method accepts a callback function as a parameter, indicating the new function to be added to the queue.

[Note] You can perform style changes in the callback function of the queue () method, but cannot increase the animation effect.

The following code shows that after the queue executes the function, the animation effect after the queue is stopped. In this case, you need to use the dequeue () method described below.

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn"> Start animation </button> <button id = "reset"> restore </button> <span id = "result"> </span> <div id = "box" style = "position: relative; height: 100px; width: 300px; background-color: lightblue "> </div> <script >$ ('# reset '). click (function () {history. go () ;}) $ ('# btn '). click (function (event) {setInterval (function () {queue ('{result'}.html ('number of Queues: '+ $ (' # box '). queue (). length)}, 100) $ ('# box '). animate ({'left': '100px '}, 1000 ). animate ({'width': '200px '}, 1000); $ (' # box '). queue (function () {detail ('{box'}.css ('background', 'lightgreen') ;}) $ ('# box '). animate ({'left': '0'}, 1000 ). animate ({'width': '100px '}, 1000) ;}); </script>

Dequeue ()

The dequeue () method is used to execute the next function that matches the element queue.

Dequeue ([queueName])

The dequeue () method can accept an optional parameter-a string containing the queue name. The default value is fx.

[Note] the dequeue () method is also a member of the queue.

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn"> Start animation </button> <button id = "reset"> restore </button> <span id = "result"> </span> <div id = "box" style = "position: relative; height: 100px; width: 300px; background-color: lightblue "> </div> <script >$ ('# reset '). click (function () {history. go () ;}) $ ('# btn '). click (function (event) {setInterval (function () {queue ('{result'}.html ('number of Queues: '+ $ (' # box '). queue (). length)}, 100) $ ('# box '). animate ({'left': '100px '}, 1000 ). animate ({'width': '200px '}, 1000); $ (' # box '). queue (function () {detail (this).css ('background', 'lightgreen'); $ (this ). dequeue () ;}) $ ('# box '). animate ({'left': '0'}, 1000 ). animate ({'width': '100px '}, 1000) ;}); </script>

ClearQueue ()

Opposite to the deQueue () method, the clearQueue () method is used to remove all unexecuted items from the queue.

[Note] clearQueue () does not affect the current animation effect.

ClearQueue ([queueName])

The clearQueue () method can accept an optional parameter-a string containing the queue name. The default value is fx.

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn"> Start animation </button> <button id = "btn1"> stop animation </button> <button id = "reset"> restore </button> <span id = "result"> </span> <div id = "box" style = "position: relative; height: 100px; width: 300px; background-color: lightblue "> </div> <script >$ ('# reset '). click (function () {history. go () ;}) $ ('# btn '). click (function (event) {setInterval (function () {queue ('{result'}.html ('number of Queues: '+ $ (' # box '). queue (). length)}, 100) $ ('# box '). animate ({'left': '100px '}, 1000 ). animate ({'width': '200px '}, 1000); $ (' # box '). queue (function () {detail (this).css ('background', 'lightgreen'); $ (this ). dequeue () ;}) $ ('# box '). animate ({'left': '0'}, 1000 ). animate ({'width': '100px '}, 1000) ;}); $ (' # btn1 '). click (function (event) {$ ('# box '). clearQueue () ;}) </script>