{"id":2095,"date":"2009-10-22T19:02:38","date_gmt":"2009-10-22T23:02:38","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=2095"},"modified":"2009-10-22T19:02:38","modified_gmt":"2009-10-22T23:02:38","slug":"how-to-add-flair-to-your-actions-with-jquery-%e2%80%93-part-3-%e2%80%93-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/andysowards.com\/blog\/2009\/how-to-add-flair-to-your-actions-with-jquery-%e2%80%93-part-3-%e2%80%93-javascript-tutorial\/","title":{"rendered":"How to Add Flair to your Actions with jQuery \u00e2\u20ac\u201c Part 3 \u00e2\u20ac\u201c Javascript Tutorial"},"content":{"rendered":"

Welcome back to part 3 of Adding Flair to your Actions with jQuery! If you missed Part 2<\/a>, go ahead and read that first, or just move ahead!<\/p>\n

Simultaneous versus queued effects <\/h2>\n

The .animate() <\/i> method, as we’ve just discovered, is very useful for creating simultaneous effects in a particular set of elements. There may be times, however, when we want to queue <\/b> our effects, having them occur one after the other. <\/p>\n

Working with a single set of elements <\/h2>\n

When applying multiple effects to the same set of elements, queuing <\/b> is easily achieved by chaining those effects. To demonstrate this queuing, we’ll again move the Text Size <\/b> box to the right, increase its height and increase its border width. This time, however, we perform the three effects sequentially, simply by placing each in its own .animate() <\/i> method and chaining the three together: <\/p>\n

$(document).ready(function() {   $('div.label').click(function() {     var paraWidth = $('div.speech p').outerWidth();     var $switcher = $(this).parent();     var switcherWidth = $switcher.outerWidth();     $switcher  .animate({left: paraWidth - switcherWidth}, <\/span> 
                                             'slow') <\/span> 
       .animate({height: '+=20px'}, 'slow') <\/span> 
       .animate({borderWidth: '5px'}, 'slow'); <\/span>   }); });  <\/pre>\n
Chaining permits us to keep all three .animate() <\/i> methods on the same line, but here we have indented them and put each on its own line for greater readability. <\/p>\n
We can queue any of the jQuery effect methods, not just .animate() <\/i>, by chaining them. We can, for example, queue effects on in the following order: <\/p>\n
    \n
  1. Fade its opacity to .5 with .fadeTo() <\/i>. <\/li>\n
  2. Move it to the right with .animate() <\/i>. <\/li>\n
  3. Fade it back in to full opacity with .fadeTo() <\/i>. <\/li>\n
  4. Hide it with .slideUp() <\/i>. <\/li>\n
  5. Show it once more with .slideDown() <\/i>. <\/li>\n<\/ol>\n
    All we need to do is chain the effects in the same order in our code: <\/p>\n
    $(document).ready(function() {     $('div.label').click(function() {       var paraWidth = $('div.speech p').outerWidth();       var $switcher = $(this).parent();       var switcherWidth = $switcher.outerWidth();       $switcher  .fadeTo('fast',0.5) <\/span> 
             .animate({ <\/span> 
               'left': paraWidth - switcherWidth <\/span> 
             }, 'slow') <\/span> 
             .fadeTo('slow',1.0) <\/span> 
             .slideUp('slow') <\/span> 
             .slideDown('slow'); <\/span>     }); });  <\/pre>\n
    But what if we want to move the to the right at the same time as it fades to half opacity? If the two animations were occurring at the same speed, we could simply combine them into a single .animate() <\/i> method. But in this example, the fade is using the ‘fast’ <\/i> speed while the move to the right is using the ‘slow’ <\/i> speed. Here is where the second form of the .animate() <\/i> method comes in handy: <\/p>\n
    $(document).ready(function() {     $('div.label').click(function() {       var paraWidth = $('div.speech p').outerWidth();       var $switcher = $(this).parent();       var switcherWidth = $switcher.outerWidth();       $switcher         .fadeTo('fast',0.5)  .animate({ <\/span> 
               'left': paraWidth - switcherWidth <\/span> 
             }, {duration: 'slow', queue: false}) <\/span>         .fadeTo('slow',1.0)         .slideUp('slow')         .slideDown('slow');     }); });  <\/pre>\n
    The second argument, an options map, provides the queue <\/i> option, which when set to false <\/i> makes the animation start simultaneously with the previous one. <\/p>\n
    One final observation about queuing effects on a single set of elements is that queuing does not automatically apply to other, non-effect methods such as .css() <\/i>. So let’s suppose we wanted to change the background color of to red after the .slideUp() <\/i> but before the slideDown() <\/i>. We could try doing it like this: <\/p>\n
    $(document).ready(function() { $('div.label').click(function() {       var paraWidth = $('div.speech p').outerWidth();       var $switcher = $(this).parent();       var switcherWidth = $switcher.outerWidth();       $switcher         .fadeTo('fast',0.5)         .animate({           'left' paraWidth - switcherWidth         }, 'slow')         .fadeTo('slow',1.0)         .slideUp('slow')  .css('backgroundColor','#f00') <\/span>         .slideDown('slow');       }); });  <\/pre>\n
    However, even though the background-changing code is placed at the correct position in the chain, it occurs immediately upon the click. <\/p>\n
    One way we can add non-effect methods to the queue is to use the appropriately named .queue() <\/i> method. Here is what it would look like in our example: <\/p>\n
    $(document).ready(function() {     $('div.label').click(function() {       var paraWidth = $('div.speech p').outerWidth();       var $switcher = $(this).parent();       var switcherWidth = $switcher.outerWidth();       $switcher         .fadeTo('fast',0.5)         .animate({           'left': paraWidth - switcherWidth         }, 'slow')         .fadeTo('slow',1.0)         .slideUp('slow')  .queue(function() { <\/span> 
               $switcher <\/span> 
                 .css('backgroundColor', '#f00') <\/span> 
                 .dequeue(); <\/span>         })         .slideDown('slow');     }); });  <\/pre>\n
    When given a callback function <\/b>, as it is here, the .queue() <\/i> method adds the function to the queue of effects for the matched elements. Within the function, we set the background color to red and then add the corollary .dequeue() <\/i> method. Including this .dequeue() <\/i> method allows the animation queue to pick up where it left off and complete the chain with the following .slideDown(‘slow’) <\/i> line. If we hadn’t used .dequeue(), the animation would have stopped. <\/p>\n
     More information and examples for .queue() and .dequeue() are available at http:\/\/docs.jquery.com\/Effects <\/a>. <\/em> <\/p>\n
    We’ll discover another way to queue non-effect methods as we examine effects with multiple sets of elements. <\/p>\n
    Working with multiple sets of elements <\/h2>\n
    Unlike with a single set of elements, when we apply effects to different sets, they occur at virtually the same time. To see these simultaneous effects in action, we’ll slide one paragraph down while sliding another paragraph up. First, we’ll add the remaining portion of the Gettysburg Address to the HTML, dividing it into two separate paragraphs: <\/p>\n
     
      
    Text Size <\/div>