2

I couldn't make this backgroundcolor fade out work

$("#x").css("background-color", "#00FF00")
$("#x").animate({ backgroundColor: '#000000' }, 2000)

http://jsfiddle.net/bf2vwba7/

Mert
  • 6,432
  • 6
  • 32
  • 68

2 Answers2

4

The way you used it is part of jquery-ui Color Animation. You can include it to your project:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

fiddle

Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • your fiddle example is different then mine, first it shoud be white in default. then green to white fade out. – Mert Jan 23 '15 at 08:26
  • still first state is green not white. – Mert Jan 23 '15 at 08:29
  • I know what I am asking looks like I am noob but when you try you will see its not working as I requested. I feel like its a bug. – Mert Jan 23 '15 at 08:30
  • And another one starting with one second delay [fiddle](http://jsfiddle.net/wmh93cv1/) – Alex Char Jan 23 '15 at 08:38
  • yes, I tried exactly this before but couldn't make it work. so I will check libraries maybe somehow they doesn't work. http://jsfiddle.net/0wja9s36/ – Mert Jan 23 '15 at 08:43
  • 1
    In your fiddle you didn't include jquery-ui. You can include it just checking the checkbox jQuery UI 1.10.3 :) – Alex Char Jan 23 '15 at 08:48
  • I deliberately didnt include to simulate my condition in my project. some how jquery-ui doesn't work in my project, can't find the reason. but thanks anyway – Mert Jan 23 '15 at 12:54
0

I'd suggest you do this with CSS transitions:

#x
{
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;  
}

Then merely set the CSS or toggle a class without worrying about the animation:

$("#x").css("background-color", "#000000");
$("#x").css("background-color", "#00FF00");

I would probably prefer to toggle a class if it were me and the context was right for it:

CSS:

#x
{
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;  
    background-color: #00FF00;
}

#x.black
{
    background-color: #000000;
}

JS:

$('#x').toggleClass('black');

Here you've got a nice separation of functionality and style.

Transitions can have certain performance benefits, but be sure to check compatibility if you choose this route:

http://caniuse.com/#search=transitions