greenimpala
greenimpala

Reputation: 3976

A way to chain a sequence of events in JQuery?

I have a few things going on that need to be done one after the other, not all methods have callback features so what's the best way to go about chaining these events together?

I have something like this

Close slider > Delete old content > Append new content > Re-open slider

I'm new to JQuery so this may seem obvious but I appreciate any help!

Upvotes: 3

Views: 10908

Answers (2)

Peter Ajtai
Peter Ajtai

Reputation: 57695

You can use queues and explicitly defined queue, but in this case you can just make use of a call back with .slideUp().

Since animations can be chained to add them to the default queue, you can just chain .slideDown() right after the .slideUp().

$(sliderSelector).slideUp(function() { 
    // delete and add stuff
}).slideDown();

jsFiddle example


If you are using custom slide up and slide down functionality with no call back, then I don't know if you have automatic queueing functionality added into the chaining either, so you can just create a queue on the fly using .queue():

$(this).queue(function() {
      // Stuff to do
    // ...
      // Dequeue
    $(this).dequeue; 
});

So your whole code would be:

    $(this).queue(function() {
        $(this).customUp();
        $(this).dequeue();
    }).queue(function() {
        // Delete & add stuff
        // ...
        $(this).dequeue();
    }).queue(function() {
        $(this).customDown();
        $(this).dequeue();
    });

jsFiddle example

Upvotes: 4

BBonifield
BBonifield

Reputation: 5003

You can use jQuery's .queue functionality. I don't know your exact usage, but it can go something like this...

$("#theSlider")
  .hide('fast')
  .queue(function(){
    $(this).html( '' ).dequeue();
  })
  .queue(function(){
    $(this).append( some_new_content ).dequeue();
  })
  .show('fast');

Animations already operate inside of the queue system, so you don't have to call dequeue for each one of those.

Upvotes: 2

Related Questions