Question

我在尝试通过在两个类之间切换来制作小按钮闪光背景颜色时遇到问题。 toglling工作，但它不顺利。问题是我的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 ...如果有人有解决方案，请帮忙。感谢。

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
}

jQuery没有使用toggleClass动画CSS3背景

1 个答案: