jQuery Animate: change background color on mouse over

Question

I want to know how you can animate the background color of a div using the animate method to change the background color on mouserover:

I came across this post but it dates back to 2010 - And it states that you have to use a plugin for this: jQuery animate backgroundColor

But surely, in 2013(with newer jQuery libraries), there must be a simpler, browser supported way of doing this in plain jQuery:

Here is my attempt:

$('div.entry-content div.one_third').on('hover',function(){
    $(this).animate({backgroundColor: '#f5f5f5'},400);
});

score 3 · Accepted Answer · answered May 15 '13 at 08:36

3

You just need to call after jQuery, jQuery UI and it will work. I have create a short sample

$('.one').hover(

    function(){
        $(this).animate({'backgroundColor': '#f5f5f5'},400);
    },
    function(){
        $(this).animate({'backgroundColor': '#000'},400);
    }

);

It works fine for me

answered May 15 '13 at 08:36

edonbajrami

2,196
24
34

thank you, this works well. thank you for the code, forgot to specify a leave function... – DextrousDave May 15 '13 at 10:38

score 2 · Answer 2 · answered May 15 '13 at 08:13

2

You still need to use a plugin as jQuery doesn't support colour animations in itself. Some recommend jQuery UI, but that's overkill if you only want colour animations, in which case you need to use this plugin (for example).

An alternative would be to toggle classes with different background colours, and set CSS transitions instead. This is a cleaner, better solution but not as well supported.

answered May 15 '13 at 08:13

Bojangles

99,427
50
170
208

thank you. But loading jquery ui is better for me since I am using worpdress, and there is a wordpress plugin for jQuery UI...How quick does jquery ui load? will it have a significant performance effect? – DextrousDave May 15 '13 at 10:37
If can you choose which modules to include in the jQuery UI package, it'll be pretty lightweight. If you have to include the whole package, it's relatively large including images and CSS, but shouldn't impact page load massively – Bojangles May 15 '13 at 10:45

jQuery Animate: change background color on mouse over

2 Answers2