鼠标事件触发但未执行功能

时间:2014-12-02 05:28:14

标签: javascript jquery

我正在尝试使用由类.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。谢谢!

2 个答案:

答案 0 :(得分:1)

在您的情况下,parseInt()的结果总是整数,0。您想要使用parseFloat()

变化:

var curOp = parseInt($(this).css('opacity'), 10);

要:

var curOp = parseFloat($(this).css('opacity'), 10);

DEMO

答案 1 :(得分:0)

你使用parseFloat,因为如果parseInt(0.1)=== 0

$('.box').mouseover(function () {
    var curOp = **parseFloat**($(this).css('opacity'), 10);
    $(this).css('opacity', curOp + 0.1);
});

;)(Y)