jQuery 3 - Animation
jQuery 3 - Animation
Written by Ian Elliot   
Monday, 27 February 2017
Article Index
jQuery 3 - Animation
The Animate Function & Facde Effects
More Fade Effects & Slide Animation
jQuery For Animation?

 

Using a Queue

One way to make asynchronous functions run sequentially is to use a queue - this is what a queue is for and the default queue is used to make animations run sequentially on a single element. 

Is there any way we could use a queue to make animations on different elements run sequentially?

Of course there is as long as we are careful about when we call the next function. It has to be called when the animation is complete. 

First we need a custom queue that can be used to queue animations on different elements. Note that each element will still have its own default queue that makes the animations run sequentially this is an additional queue that makes the animations on different elements run sequentially. 

First we need an object that we can use as a universal queue.

 var seq = $({});

This object can support multiple queues if necessary but in this example we will just use one "q1". The first thing we have to do is add a function that runs the animation:

seq.queue("q1", function(next){
 $("#button1")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
  }
);

 

When it gets to run this causes the animation on button1 to start and this runs sequentially on the default queue. The only tricky bit is where to place the call to next. This is placed as the complete function in the final animation and this causes the next item in q1 to be dequeued.

You can do the same thing with the animation on another element and finally to get q1 started we need to make an explicit call to dequeue. For example:

var seq = $({});
seq.queue("q1", function(next){
   $("#button1")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
    }
);
seq.queue("q1", function(next){
   $("#button2")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
});
seq.dequeue("q1");

If you run this you will see button1 animate and then button2 animates. 

Once you have seen the method you can see that it can be generalized to start other animations at particular points in an animation. For example if you wanted to start the second button's animation at the end of the first slide up you would change the code to:

var seq = $({});
seq.queue("q1", function(next){
   $("#button1")
    .slideUp(5000,next)
     .delay(1000)
      .slideDown(5000);
    }
);
seq.queue("q1", function(next){
   $("#button2")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
});
seq.dequeue("q1");

You can even start multiple animations at different points by calling next more than once. 

jQuery For Animation?

There are more extensive libraries that are designed to make animation easy and polished. jQuery gives you some basic tools to create a fairly simple animated UI. Think of it as being something that is there as a part of using jQuery and something that you can use with little extra cost to add a bit of polish to the UI. If you plan to make animation a key part of the UI, or want to use animation in a game or something similar, then jQuery is almost certainly not sufficient for your purpose. 

More Information

http://jquery.com/

jquerysq

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it

 

 

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

Banner


Master JavaScript Regular Expressions

Regular expressions can seem complex but the biggest reason for this is that most programmers don't take them seriously enough. Spend just a little time finding out how they work and you can do amazin [ ... ]



jQuery 3 - Consuming Promises

Promises are a way of organizing asynchronous calls that is better than using callbacks. The callbacks are still there but they are come with a degree of organization. Previously jQuery was criticized [ ... ]


Other Articles

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.

 
 

 

blog comments powered by Disqus



Last Updated ( Monday, 17 April 2017 )
 
 

   
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.