Remove Class after Animation

Question

I have a div which I am attempting to animate. The div has an animation class called peek_up applied and I am using else/if to add an animation that lowers the div if peek_up is applied, and raises it if it is not. My problem is that the class I am using to raise obscures the peek_up class, even though peek_up is applied. How would I go about removing the animation used to raise after it is complete?

$('#box').on('click', function() {
var $this = $(this);
if ($this.hasClass('peek_down')) {
$this.toggleClass('peek_down').toggleClass('bob_down');
}
else{ 
$this.toggleClass('close_up');
}
});

bob_down lowers the div, close_up raises it (and obscures peek_up in doing so). This code is the closes I have gotten.

http://jsfiddle.net/6sQU5/

Answer 1

I managed to get the animations to run as I intended using the setTimeout function, though for some reason it doesn't seem to translate into the jsFiddle. It works fine in my browser.

$('#box').on('click', function (){
var $this = $(this);
if ($this.hasClass('peek_down')){
    $this.removeClass('peek_down')
         .addClass('bob_down');
} else{
    $this.removeClass('bob_down')
         .addClass('close_up')
         .addClass('peek_down')
         setTimeout(function(){
    $this.removeClass('close_up')},600);
}
});