html - jQuery not animating CSS3 background with toggleClass -


i having problems trying make small button flash background colors toggling between 2 classes. toglling works, isnt smooth. problem css. i'm using css3 gradients bagrounds. here 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 needed... if has solution please help. thanks.

i edited here use opacity change 0-1 make 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 } 

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -