Question

I’m trying to set an hover effect using jqueryUI’s addClass() and removeClass().
This is what I came up with: http://jsfiddle.net/5aS77/ .
As you can see, ‘onmouseout’, the background becomes white for a time and then ‘jumps’ to blue again.
I just want the animation to go from blue to pink and vice verse without any ‘interruptions’.

I know it is possible with CSS3, and I did try it already though it has 2 main cons:
1) Not all browsers support the transition property.
2) It doesn’t have an onmouseout effect. (though it can be achieved with some JS.)

Answer 1

The white flash is because jQuery doesn’t have a base colour to animate from as the background-color is set on the .nav class and not the <a> elements.

You can edit the rules as follows to remove the white flash.

.nav a {
    background-color:blue;
    ...
}

.nav .a_hover { // <--- need the .nav here otherwise CSS specificity results in blue still winning
    ...
}

Also, if you want, here is a slightly cleaner implementation of the jQuery:

$('a').on({
    mouseenter:function() {
        $(this).stop().animate({backgroundColor:'#f89ed5'}, 250);
    },
    mouseleave:function() {
        $(this).stop().animate({backgroundColor:'blue'}, 250);
    }
});

With this, the .a_hover class can be removed, although you still need the background-color:blue on the .nav a rule to avoid the initial white flash. The other properties in the .a_hover are not needed since they already exit on the .nav a rule.