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.action();
}, options.delay);
});
};
})(jQuery);
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').
delayChain({
delay: 2000,
action: function() {
$('#test').css('opacity', '0.5');
}
}
);
e.preventDefault();
});
Now the second call to the css() method is delayed by 2 seconds, thus creating an interesting effect. You can see a demo below.