jQuery not animating CSS3 background with toggleClass

Question

I am having problems trying to make a small button flash background colors by toggling between two classes. The toglling works, but it isnt smooth. The problem is my css. I'm using css3 gradients as my bagrounds. Here is my code:

CSS:

.cos{
    background:none;
}
.cos_hover{
    background: linear-gradient(bottom, rgb(161,0,3) 17%, rgb(115,0,2) 59%);
    background: -o-linear-gradient(bottom, rgb(161,0,3) 17%, rgb(115,0,2) 59%);
    background: -moz-linear-gradient(bottom, rgb(161,0,3) 17%, rgb(115,0,2) 59%);
    background: -webkit-linear-gradient(bottom, rgb(161,0,3) 17%, rgb(115,0,2) 59%);
    background: -ms-linear-gradient(bottom, rgb(161,0,3) 17%, rgb(115,0,2) 59%);
    background: -webkit-gradient(
         linear,
         left bottom,
         left top,
         color-stop(0.17, rgb(161,0,3)),
         color-stop(0.59, rgb(115,0,2))
     );
    -moz-box-shadow: inset 0 10px 28px -2px #000;
    -webkit-box-shadow: inset 0 10px 28px -2px #000;
    box-shadow: inset 0 10px 28px -2px #000;
}

HTML:

                <ul class='navigatie_meniu'>
                    <li><img src='../img/web/acasa_meniu.png' /></li>
                    <li><img src='../img/web/inapoi_meniu.png' /></li>
                    <li class='cos' active='0'><img src='../img/web/cos_meniu.png' style='z-index:100;'/></li>
                    <li>190 lei</li>
                    <li></li>
                </ul>

JS:

setInterval(function(){
    if($(".cos").attr("active")==0){
        $(".cos").toggleClass("cos_hover", 1000);

    }
},2000);

setInterval might not be needed... If anyone has a solution please help. Thanks.

Here is all your code you posted set up in a JSFiddle.net fiddle http://jsfiddle.net/JutM2/ — Zack, May 08 '13 at 20:39
Can [this](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) help? — Mateusz, May 08 '13 at 20:42
@VictorBojica Why don't you want "explicit css" in the javascript? — Zack, May 08 '13 at 21:36
because later in the build i will use different layouts for the site — Victor Bojica, May 08 '13 at 21:38

score 2 · Answer 1 · answered May 08 '13 at 20:42

I edited it here to use the opacity change from 0-1 to make it smoother:

http://jsfiddle.net/JutM2/1/

.cos {
    background: linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
    background: -o-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
    background: -moz-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
    background: -webkit-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
    background: -ms-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(161, 0, 3)), color-stop(0.59, rgb(115, 0, 2)));
    -moz-box-shadow: inset 0 10px 28px -2px #000;
    -webkit-box-shadow: inset 0 10px 28px -2px #000;
    box-shadow: inset 0 10px 28px -2px #000;
    opacity: 0;
}
.cos_hover {
    opacity: 1
}

the problem is that i have content that i want to show inside the div and the opacity doesnt do it..:( — Victor Bojica, May 08 '13 at 20:46

jQuery not animating CSS3 background with toggleClass

1 Answers1