3

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!

greenimpala
  • 3,777
  • 3
  • 31
  • 39

2 Answers2

4

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

Peter Ajtai
  • 56,972
  • 13
  • 121
  • 140
  • I was gonna say pretty much the same thing but he said "not all methods have callback features" so I figured maybe a queue example would work better! – BBonifield Sep 16 '10 at 21:09
  • 1
    @BBonifield - But if OP is using custom functions for sliding up and down, then chaining those functions probably wouldn't automatically add them to the queue. ---- Edited answer to handle that case too. – Peter Ajtai Sep 16 '10 at 21:40
2

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.

BBonifield
  • 4,983
  • 19
  • 36