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);
}
});

Answer 2

Are you doing the animation with jQuery or CSS3? By animate do you mean to simply toggle the class? You will need to post your full animation code for people to be able to understand what you're trying to do here.

The jQuery animate() function has the ability to add a post-animation callback function that you could use to achieve what you require. For example:

$("#box").click(function() {
    $("#box").animate({
        top: "+=100"
    }, 5000, function() {
        // Post-animation callback function, add the required code here
    });
});