如何在javascript中增加不透明度?

时间:2012-09-28 22:08:39

标签: javascript opacity

我希望能够使用

element.style.opacity += 0.1;

element.style.opacity = element.style.opacity + 0.1;

但这不起作用。不透明度不会改变。如果我将不透明度设置为静态值,例如

element.style.opacity = 0.5;

确实有效。我做错了什么?

5 个答案:

答案 0 :(得分:6)

element.style.opacity(假设它完全定义)将是一个字符串,而不是一个数字。

"0.1" + 0.1 === "0.10.1"

你可能想要:

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

答案 1 :(得分:2)

我建议以下内容,如果尚未定义,则为opacity分配预定义值:

// using a simple onclick for demo purposes
t.onclick = function(){
    var opacity = this.style.opacity;
    this.style.opacity = opacity ? (parseFloat(opacity) + 0.1) : 0.2;
};​​​

JS Fiddle demo

这似乎是必要的,因为如果opacity尚未在内联style属性中定义,则值似乎不会增加。如果您的 定义在那里,那么这种方法可能没有必要。

答案 2 :(得分:1)

我突然想到你可以通过字符串因子实际降低不透明度,如下所示:

element.style.opacity -= '0.1';

这样可以正常工作,但不是相反,因为运算符+ =尝试追加到结果字符串。但是,通过

可以实现增量
element.style.opacity -= '-0.1';

将按需增加它。

答案 3 :(得分:0)

您可能希望在css中设置关键帧,并将id或类添加到元素

Example for calling a keyframe:
.myElement{
position:absolute;
background:blue;
-webkit-animation:KeyframeName 1s linear infinite;
}

Example for a keyframe:
@-webkit-keyframes KeyframeName {
0%{style code here, example: opacity:1;}
100%{style code here, example: opacity:0;}
}

唯一不利的方面是: - 您必须为所有浏览器设置关键帧。 - 在移动设备上,它需要很多电量,这意味着您的页面变得无法触摸或可以点击。并且很难同时使用许多关键帧。

尝试在javascript中创建一个函数并将此代码放入其中:

var OpacityValue = 1;
function OpacityChange(){
    if(OpacityValue == 0.0){
        Opacity = 0.0;
        clearInterval(TimerName);
     }
     else if(OpacityValue > 0){
        OpacityValue += -0.1;
     }
     yourElement.style.opacity = OpacityValue;
}

使用计时器启动此功能,您获得不透明度,当其值为0.0时将停止 不要忘记放置一个var TimerName;作为全球,否则你不能停止计时器!

答案 4 :(得分:0)

您还可以使用.toString();方法