Delaying the jQuery chain

During the development process of complex, Flash-like animations I realized that the core jQuery's delay() method is powerful but somewhat limited, because it can be used only with effects. So I developed a minimal plugin, called delayChain() that allows you to delay the jQuery's chaining process by a user-defined time span. This plugin is very simple and makes use of a call to the JavaScript's setTimeout() function to delay the execution of a jQuery action. Here's the code:

(function($) {

  $.fn.delayChain = function(options) {
     options = $.extend({
       delay: 800,
       action: function() {},
     }, options);
     return this.each(function() {
       window.setTimeout(function() {
       }, options.delay);


As you can see, this plugin is really simple. It simply delays the execution of your code for a certain amount of time defined by you. An example:

 $('#run').click(function(e) {
    $('#test').css('background', 'orange').
      delay: 2000,
      action: function() {
        $('#test').css('opacity', '0.5');

Now the second call to the css() method is delayed by 2 seconds, thus creating an interesting effect. You can see a demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.