jQuery animate background color not animating

Question

HTML

<div id="account-setup-guide">
    <div id="account_tour_info">
        <ul>
            <li class="setup_complete"><strong>1</strong> Sync!</li>
        </ul>
    </div>
</div>

CSS

#account-setup-guide {
    position: relative;
    margin: 30px 30px 20px 20px;
    padding: 20px;
    width: auto;
    border: 5px solid orange;
    background: orange;
}

jQuery

var animateThis = function() {

    console.log('run animateThis');

    $('#account-setup-guide').stop().animate({backgroundColor: '#ffffff'}, 500);

    $('#account-setup-guide').animate({
        background: 'white'
    }, 500);
}

animateThis();

Not sure why this isn't working, I've used both examples above of the .animate but it's not working in my current jsfiddle test :(

adding jQuery UI: jsfiddle.net/98mD2/14 jQuery core doesn't support animating color, jQuery UI does or jquery color plugin if you don't need all UI plugin. BTW, you could use CSS3 transition — A. Wolff
– A. Wolff, Commented Jan 10, 2014 at 16:10
Ah thanks man! Do you want to post this as an answer? Thought I was going crazy lol — Leon Gaban
– Leon Gaban, Commented Jan 10, 2014 at 16:13
@kei had posted answer, now deleted. I hope he'll undelete his answer so you could accept it instead — A. Wolff
– A. Wolff, Commented Jan 10, 2014 at 16:15
@A.Wolff do you remember how much rep he had? 14 Kei's on stack — Leon Gaban
– Leon Gaban, Commented Jan 10, 2014 at 16:23
7,283 username kei stackoverflow.com/users/747674/kei FYI, with more than 10000 in rep, you can still see deleted answers ;) — A. Wolff
– A. Wolff, Commented Jan 10, 2014 at 16:24

A. Wolff · Accepted Answer · 2014-01-10 16:55:21Z

1

jQuery doesn't support animation of color, you have to include plugin which support it as jQuery UI or jQuery color:

jQuery color

jsFiddle (thx to kei)

answered Jan 10, 2014 at 16:55

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leon Gaban Over a year ago

Thanks, normally I use CSS for background animation, but figured I'd do this in js instead this time...

Collectives™ on Stack Overflow

jQuery animate background color not animating

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related