changing javascript class background color

Question

I Have this Javascript....

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $('metro tile-area-darkCrimson').css('background-color','#f36c20');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script> 

and the class metro tile-area-darkCrimson is defined as in CSS....

.metro .tile-area-darkCrimson {
  min-width: 100%;
  height: 100%;
  background-color: #1f255b !important;


    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;

}

Why does the background color not change even though the rest of the function works ? Much help appreciated in advance.

Cheers, Greg.

EDIT ---------

I now have this on advice from helpful people

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $('.metro .tile-area-darkCrimson').addClass('color-red');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script> 

and have added into the CSS this ...

.color-red { background :#f36c20; }

But still not working any more help really appreciated.

Thanks, Greg.

Answer 1

Did you try without the !important tag?

Change this:

background-color: #1f255b !important;

Into this:

background-color: #1f255b;

Answer 2

You have missed the dot notation of class. Change this line

 $('metro tile-area-darkCrimson').css('background-color','#f36c20');

to

$('.metro tile-area-darkCrimson').css('background-color','#f36c20');

Answer 3

Change:

$('metro tile-area-darkCrimson').css('background-color','#f36c20');

to

 $('.metro .tile-area-darkCrimson').css('background-color','#f36c20');

Answer 4

You have missed the . for the metro class in jQuery

$('.metro tile-area-darkCrimson').css('background-color','#f36c20');

Also it would be better to add a class instead of using .css in jQuery

$('.metro .tile-area-darkCrimson').addClass('color-red');

and in your css make class

.color-red { background :#f36c20; }

`