Fade in background color using jQuery?

Question

I would like to take a div and have the background fade to white on mouseenter and fade back out to black on mouseout. Any ideas on how to do this in jQuery?

Answer 1

You need to use either jQuery UI libarary or jQuery Colors to enable animation of colors

$('div').hover(function () {
    $(this).stop(true, true).animate({
        backgroundColor: 'black'
    })
}, function () {
     $(this).stop(true, true).animate({
        backgroundColor: 'white'
    })
})

Demo: Fiddle