Question

I’m trying to use a step: function to make my “tab” div and an “options” div slide out at the same time (i.e., sync the animation of the two divs), but I also need a regular function for the animation.

Is it possible to have both of these types of functions as the callback function for .animate()?

Edit:

Test page

On the above test page, I’m wanting to make another div slide out on click of the “text tab” in the upper left corner, BUT according to the jQuery .animate() docs, the step: function is used to sync the animation of different elments and I’m here is my JS:

$( "#optsdiv" ).hide();
$( "#closediv" ).hide();
$( "#opendiv" ).click( function() {
  $( "#opendiv" ).animate( { left: "+=100px", opacity: 1 }, 1400, "easeOutExpo", function() {
     $( "#opendiv" ).hide();
     $( "#opendiv" ).animate( { left: "-=100px", opacity: 0.6 }, 0 );
     $( "#closediv" ).show();
    });
});

$( "#closediv" ).click( function() {
  $( "#closediv" ).animate( { left: "-=100px", opacity: 0.6 }, 1400, "easeOutExpo", function() {
    $( "#opendiv" ).show();
    $( "#closediv" ).hide();
    $( "#closediv" ).animate( { left: "+=100px", opacity: 1 }, 0 );
   });
});

As you can see, I use a “normal” function (a non-step: function) to finish up the animations… so I was wondering if I could still use the function I’m currently using while implementing the step: function in the same callback so as to sync the sliding out of the tab and the other div.

Answer 1

If by “regular function”, you mean a callback at the end of the animation, then yes, just set all the properties of the animation using the second options argument:

$('.someElement').animate({width:100}, { duration:1000,
                                         step: function(){},
                                         complete: function(){} });

Example: http://jsfiddle.net/n2pZp/1/