jQuery animate background-color on input button not working

Question

I have absolutely no idea why the background color isn't changing and I've spent far too much time on it already:

<input type="button" class="front-consultation-btn" value="Get A Free Consultation">

<script>
    $('.front-consultation-btn').animate({ backgroundColor: '#FF0000', width: 400 }, 500);
</script>

Why does this ONLY change the width property?

See http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Derek Hunziker, Aug 14 '12 at 19:22

score 2 · Answer 1 · answered Aug 14 '12 at 19:25

2

This is because jQuery doesn't support animating colors by default, jQueryUI adds this functionality: http://jqueryui.com/demos/animate/

answered Aug 14 '12 at 19:25

RdeWolf

21
1

[Here](http://www.bitstorm.org/jquery/color-animation/) is something fairly simple to use. – Pathros Mar 07 '16 at 17:20

score 1 · Answer 2 · edited Sep 05 '12 at 18:29

1

Why not use CSS3?

.yourelement {
    background: #fff;
}

.yourelement:focus, .yourelement:hover {  
    -webkit-transition: background-color 0.5s linear;   
    background: #ccc;   
}

edited Sep 05 '12 at 18:29

Zoltan Toth

46,981
12
120
134

answered Aug 14 '12 at 19:24

matt

1,015
4
14
28

2

I'd say because U can't add a callback to it? – DarkBee Nov 04 '14 at 10:48

jQuery animate background-color on input button not working

2 Answers2