jQuery가 toggleClass로 CSS3 배경에 애니메이션을 적용하지 않습니다.

Question

두 클래스 사이를 전환하여 작은 버튼 플래시 배경색을 만들려고 할 때 문제가 있습니다. 토글 링은 작동하지만 부드럽 지 않습니다. 문제는 내 CSS입니다. 내 bagrounds로 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을 필요되지 않을 수 있습니다

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

    } 
},2000); 

... 사람이 솔루션을하시기 바랍니다가있는 경우 도움. 감사.

Answer 1

나는 그것을 부드럽게하기 위해 0-1에서 불투명도 변경을 사용하여 여기에 편집 :

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 
}