1

我在尝试通过在两个类之间切换来使小按钮闪烁背景颜色时遇到问题。切换有效，但并不顺畅。问题是我的CSS。我使用css3渐变作为我的bagrounds。这是我的代码：

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 ...如果有人有解决方案，请提供帮助。谢谢。

4

1 回答 1

2

我在这里对其进行了编辑，以使用从 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
}
于 2013-05-08T20:42:28.880 回答