我正在尝试使用由类.box
的框组成的网格来制作一个简单的绘图程序。我希望通过改变不透明度,每次通过鼠标时盒子会逐渐变暗。
$('.box').mouseenter(function() {
var currentOp = parseInt($(this).css('opacity'));
$(this).css('opacity', currrentOp + .1);
});
事件触发一次并将不透明度从0更改为.1,但随后不会继续增加后续鼠标传递的不透明度。
我可以使用以下代码获得所需的结果:
$('.box').mouseenter(function() {
$(this).css('opacity', '+=1');
});
有谁能告诉我为什么我的第一次尝试不起作用? Here是一个包含整个代码的JSFiddle。谢谢!
答案 0 :(得分:1)
在您的情况下,parseInt()
的结果总是整数,0。您想要使用parseFloat()
。
变化:
var curOp = parseInt($(this).css('opacity'), 10);
要:
var curOp = parseFloat($(this).css('opacity'), 10);
答案 1 :(得分:0)
你使用parseFloat,因为如果parseInt(0.1)=== 0
$('.box').mouseover(function () {
var curOp = **parseFloat**($(this).css('opacity'), 10);
$(this).css('opacity', curOp + 0.1);
});
;)(Y)