Apply jQuery effects in a sequence

Using the JavaScript library jQuery, you can apply effects to various DOM objects with ease. Each objects owns an effect-queue that is processed in a sequence. Fine, however how can we construct a sequence across multiple objects? Assume you have a list of titles in your website and you want to highlight them one after the other, not all at the same time. We can accomplish this by writing a simple function that applies the effects to the current object and continues with the next sibliing object.

Ok, assume we have this table and we wan to apply some effects to their rows sequentially:


<table id="features">
<tr>
<td>1a</td>
<td>1b</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
</tr>
</table>

Now this script begins attaching the effects to the first row (“tr:first”). Our callback function seqfx is called when all effects on this object are processed, it will apply itself again to the next object and so on..

jQuery.fn.seqfx = function()
{
    $(this).fadeOut("fast").fadeIn("slow", function()
    {
        $(this).next().seqfx();
    });
};

$(document).ready(function()
{
    $("#features tr:first").seqfx();
});

This works fine and ensures sequential processing of all the table rows.

Advertisements

1 Response to “Apply jQuery effects in a sequence”


  1. 1 After effects template editing September 29, 2014 at 10:12 am

    What’s Going down i’m new to this, I stumbled upon this I’ve found It positively helpful and
    it has aided me out loads. I’m hoping to give
    a contribution & help other users like its helped me. Great job.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: