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">

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()

    $("#features tr:first").seqfx();

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


2 Responses 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.

  2. 2 Sample Words Blog April 28, 2018 at 12:08 pm

    Fantastic items from you, man. I have bear in mind your stuff previous to and
    you are simply extremely fantastic. I really like what
    you’ve acquired right here, really like what you’re stating
    and the way in which through which you say it. You are making
    it entertaining and you continue to care for to stay it sensible.
    I can not wait to read far more from you. That is really a great website.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: