Writing jQuery functions that allow chaining

Question

I want to write some code that allows me to replace jQuery's animate function with one that does different things, but still allows me to call a secondary function on completion.

At the moment, I'm writing lots of code like this;

if (cssTransitions) {
   $("#content_box").css("height",0);

   window.setTimeout(function() {
       secondFunction(); 
   }, 600);
} else {
    $("#content_box").animate({
        height:0
    }, 600, function() {                
        secondFunction();
    });
}

I'd much rather write a function that looks like this:

function slideUpContent(object) {
    if (cssTransitions) {
         object.css("height",0);
         // Not sure how I get a callback here
    } else {
        $("#content_box").animate({
            height:0
        }, 600, function() {
        });
    }
}

That I could use like this:

slideUpContent("#content_box", function(){
    secondFunction();
});

But I'm not sure how to get the functionality I need - namely a way to run another function once my one has completed.

Can anyone help my rather addled brain?

Take a look at jQuery's queue function: api.jquery.com/queue — Christian Joudrey
– Christian Joudrey, Commented Jan 10, 2011 at 21:57

Orbling · Accepted Answer · 2011-01-10 21:56:31Z

3

The functionality you are looking for is called a callback.

It is simple enough to implement. Just pass the anonymous function (or other function) as a parameter, then call the variable passed in by appending brackets callback() (obviously checking to see if it is a valid function first).

function slideUpContent(object, callback) {
    if (cssTransitions) {
         object.css("height",0);
         // Perform callback if set
         if ($.isFunction(callback)) {
             callback();
         }
    } else {
        $("#content_box").animate({
            height:0
        }, 600, callback);
    }
}

answered Jan 10, 2011 at 21:56

Orbling

20.7k4 gold badges56 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rich Bradshaw Over a year ago

That's really obvious now I see it! Thanks!

Rich Bradshaw Over a year ago

Actually, one question – does this work even if no callback is specified?

Orbling Over a year ago

@Rich Bradshaw, should do. The use of callback passing to animate() should be fine, depends what it wants as a default.

Tom Clarkson · Accepted Answer · 2011-01-10 21:57:02Z

1

Chaining usually means returning this so you can do

$("selector").function1().function2();

For your example, you just need

function1(param1, f) {
    // do stuff
    f();
 }

then call it with

function1("parameter", function2);

answered Jan 10, 2011 at 21:57

Tom Clarkson

16.2k2 gold badges45 silver badges52 bronze badges

Comments

Austin Ginder · Accepted Answer · 2011-01-10 22:05:48Z

0

I had recently created a sequence opening animation for a website. I found this website to be a good source of information. The part that might be helpful for you is the section titled, "Creating a sequence of animations".

http://www.elated.com/articles/super-easy-animated-effects-with-jquery/

answered Jan 10, 2011 at 22:05

Austin Ginder

5163 silver badges5 bronze badges

Collectives™ on Stack Overflow

Writing jQuery functions that allow chaining

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related