Hi, hopefully someone can help,

I have a card at the bottom of my page that when a user clicks, will appear to come out from under the page and move back on top of it.

The first bit seems to work ok, but I cant get it go back under the page.

this is what I have.

Code:
	$('.card').css({"margin-top":"-150px",}, 1000);
	$('.card').click(function(){	
		$(this).animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).addClass('ontop');	
			$(this).animate({"margin-top":"-130px",}, 700);
			$(this).append('<span class="close-card">Close</span>');	
		});
		
	});
	$('.close-card').click(function(){	
		$('.card').animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).removeClass('ontop');					
		});
		$('.card').animate({"margin-top":"-150px",}, 700);
	});
Any ideas?

I know it is quite basic right now, as I am still learning this, but any help is welcome. Also I understand I'd need to build in some 'fail safes' like if it is already ontop dont do the animation, etc, so help here would really be appreciated too, thanks for looking.