How can I execute two different jQuery animations right after each other with the same "button"?

Question

When I press the button I animate my .header_inner to move downwards. But how do I make it to go back to its original position when I press the button again or to animate it moving upwards?

Code:

<script>
  $('.handler').click(function(){
    $('.header_inner').animate({
        top:"-=-28%",
    }, 300);
});     
</script>

I want my .header_inner to animate its way back again when I press the button again.

Answer 1

You can create a boolean variable that indicates whether the last movement was upwards or downwards:

var upwards = false,
    newTop;
$('.handler').click(function(){
    if (upwards) newTop = '28';
    else newTop = '-28';
    $('.header_inner').animate({
        top:"-=" + newTop + "%",
    }, 300);
    upwards = !upwards;
});