Toggle animation?

Question

I have this code:

$('.couch-hide').click(function() {
    $(this).animate({right:0},1000, 'easeOutBounce');           
});

I am trying to get it to toggle, so on first click, pop it out, then click again, and place it back inside. Would i need to set a variable as a tracker? To tell what stage it is at?

Answer 1

Generally jquery toggle works pretty much in a standard way as given below, however i have not really tried it with animation stuff but this may work.

$('.couch-hide').click(function() {
    $(this).animate({right:0},1000, 'easeOutBounce').toggle();                       
});

Answer 2

Just save the original value somewhere, and remember to stop any in-progress animation before starting a new one. The animation routines will take care of the rest:

var panel = $('.couch-hide');
var originalPos = panel.css("right");
panel.toggle(function() {
    $(this).stop().animate({right:0},1000, 'easeOutBounce');
  },
  function() {
    $(this).stop().animate({right:originalPos},1000, 'easeOutBounce');
  });