Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can there be a step function and a normal function for the .animate() callback in jQuery?

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.

like image 351
Aaron Chauvin Avatar asked Jun 25 '11 19:06

Aaron Chauvin


1 Answers

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/

like image 85
user113716 Avatar answered Sep 21 '22 14:09

user113716