我希望能够使用
element.style.opacity += 0.1;
或者
element.style.opacity = element.style.opacity + 0.1;
但这不起作用。不透明度不会改变。如果我将不透明度设置为静态值,例如
element.style.opacity = 0.5;
它确实有效。我究竟做错了什么?
我希望能够使用
element.style.opacity += 0.1;
或者
element.style.opacity = element.style.opacity + 0.1;
但这不起作用。不透明度不会改变。如果我将不透明度设置为静态值,例如
element.style.opacity = 0.5;
它确实有效。我究竟做错了什么?
element.style.opacity
(假设它完全被定义)将是一个字符串,而不是一个数字。
"0.1" + 0.1 === "0.10.1"
你可能想要:
element.style.opacity = parseFloat(element.style.opacity) + 0.1;
我突然想到,您实际上可以通过字符串因子降低不透明度,如下所示:
element.style.opacity -= '0.1';
这将工作得很好,但不是相反,因为运算符 += 试图附加到结果字符串。然而,增量可以通过做来实现
element.style.opacity -= '-0.1';
这将根据需要增加它。
我建议以下,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;
};
opacity
这似乎是必要的,因为如果尚未在 in-linestyle
属性中定义,则该值似乎不会增加。如果这是你的定义,那么这种方法可能没有必要。
您也可以使用.toString();
方法
您可能希望在 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 ;作为全局,否则你不能停止计时器!