Manage complex animations with jQuery

I need to accomplish fairly complex animations on my website where elements slide up and down, CSS properties are manipulated and so on. I wonder how to do this in an elegant way.

Actions fire onclick, another click should revert everything until the site is in its original state again.

What I not want to do is write a function like

$(somebutton).onclick(function() {
        if($(this).hasClass("clicked") {
             $(this).slideDown();
             $('#that').show();
             $('#button').css("position","absolute");
             // more things going on
          } else {
             // revert all things gone on
             $(this).slideUp();
             $('#that').hide();
             $('#button').css("position","static");
          }

});

That means I do开发者_如何学Python not want to write all these statements twice, or even worse, most of the animations are the same in 70 %. I did not want to write that over and over again.

What I thought of was something like an animation queue, which I can manipulate, pop and shift and most important revert. I found jQuery's queue()-Function, but there is one point I get stuck:

• once the custom queue is dequeued it is not present any more, that means I can animate the element once, but I can't say for example

  myQueue.queue('animate').reverse();

after myQueue was fired because it is empty at this point.

This lengthy explanation is not just for this simple queue problem. It is also an invitation to suggest ideas for a better way to accomplish that.

I don't think there's a solution out of the box. Animations are not aware of their invert operation, so reverting them is a non-trivial task. That said it shouldn't be all to complicated to write such a system yourself. After all each animation is very simple and the inverted operation should be easily generateable.