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

Question

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

Answer 1

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

变化：

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

要：

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

DEMO

Answer 2

你使用parseFloat，因为如果parseInt（0.1）=== 0

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

;）（Y）