JQuery addClass affect once

Question

I want to animate my div tag when the button is pressed, by adding animate.css class by jquery, but this only works once and stops working each subsequent time the button is being pressed.

This is html code:

    <div id="note" class="">a</div>
    <button id="submit">submit</button>

and this is jquery

$(document).ready(function() {
$('#submit').click(function() {
    $('#note').removeClass();
    $('#note').addClass('animated fadeInLeft');
    $('#note').html('some text');
});});

you can see on http://jsfiddle.net/Lgg9D/5/
how to animate div each time press button?
thanks

Answer 1

it just take a little time before classes are removed. you can add a little delay after removing classes:

$(document).ready(function() {
    $('#submit').click(function() {
        $('#note').removeClass('animated fadeInLeft');
        setTimeout(function(){
            $('#note').addClass('animated fadeInLeft');},50);

        $('#note').html('some text');
    });
}); 

http://jsfiddle.net/Lgg9D/13/

Answer 2

Why not just toggle the class, It handles the addition and removal alone

$(document).ready(function() {
    $('#submit').click(function() {
        $('#note').toggleClass('animated fadeInLeft');
        if($("#note").html() == 'a')
        {
        $('#note').html('some text');
        }
        else
        {
        $('#note').html('a');
        }
    });
});

Demo Fiddle

Answer 3

You can try this:

$('#submit').click(function() {        
    $('#note').removeClass();
    setTimeout(function(){
      $('#note').addClass('animated fadeInLeft');
      $('#note').html('some text');
    },1);        
});

Demo.