jQuery UI weirdness

Question

I'm very new to jQuery but keen to learn. Because of this I'm using jsFiddle to have a play and see what can be done - nothing serious, just playing with animation, etc.. specifically, the ability to animate between two classes.

Getting to the point, can you have a look at this and let me know why I need the .delay for it to work?

http://jsfiddle.net/Ps4Xn/2/

$('div').click(function() {    
    if ($(this).hasClass('clicked')) {
        $(this).delay(1).removeClass('clicked', 5000, 'easeInElastic');
    } else {
        $(this).delay(1).addClass('clicked', 5000, 'easeInElastic');
    }
});

So far as I can tell, I should be able to get rid of the two .delays, but when I do, it doesn't work.

Answer 1

Let's simplify things.

Non-animated version (jsfiddle):

$('div').click(function() {
    $(this).toggleClass('clicked');
});

Correctly animated version (jsfiddle)
Correctly animated version (jsbin)

$('div').click(function() {
    $(this).toggleClass('clicked', 5000, 'easeInElastic');
});

The code works on jsbin but not jsfiddle - there's just something wonky with jsfiddle. It's not your code.
I generally avoid jsfiddle for tooling around with jQueryUI, since they don't play very nicely together.