jquery - jQueryがtoggleClassでCSS3の背景をアニメーション化しない

Question

2 つのクラスを切り替えて、小さなボタンの背景色を点滅させようとすると問題が発生します。トグルは機能しますが、スムーズではありません。問題は私のcssです。私はバッググラウンドとして css3 グラデーションを使用しています。これが私のコードです：

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 は必要ないかもしれません...誰かが解決策を持っている場合は助けてください。ありがとう。