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

 

I 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

 

The companion volume will be available as a book very soon:

Just jQuery: Events, Async & Ajax

  1. Events In jQuery (coming soon)
  2. Working With Events
  3. Asynchronous Code
  4. Promises & Deferred
  5. Using Promises
  6. WebWorkers

  7. Ajax the Basics - get
  8. Ajax the Basics -  post
  9. Ajax - Advanced Ajax To The Server
  10. Ajax - Advanced Ajax To The Client
  11. Ajax - Advanced Ajax Transports And JSONP
  12. Ajax - Advanced Ajax The jsXHR Object
  13. Ajax - Advanced Ajax Character Coding And Encoding

 

Banner


Getting Started with jQuery UI

jQuery UI is built to work with jQuery. If you are  already using jQuery, it is recommended as an addin to make your pages look like more than just HTML. Let's see how easy it is to get started w [ ... ]



Getting Started With QUnit Testing

Testing JavaScript with QUnit is very easy and it rewards the effort you put in many times over. Find out how easy it is to add some tests to an existing JavaScript program.


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

Banner


Getting Started with jQuery UI

jQuery UI is built to work with jQuery. If you are  already using jQuery, it is recommended as an addin to make your pages look like more than just HTML. Let's see how easy it is to get started w [ ... ]



Getting Started With QUnit Testing

Testing JavaScript with QUnit is very easy and it rewards the effort you put in many times over. Find out how easy it is to add some tests to an existing JavaScript program.


Other Articles



Last Updated ( Tuesday, 28 February 2017 )
 
 

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