使用 jquery hover 增加 div 的不透明度答案

【问题标题】：Increasing opacity of div with jquery hover使用 jquery hover 增加 div 的不透明度
【发布时间】：2014-05-22 06:22:13
【问题描述】：

我正在使用 jquery hover 来增加 div 网格中 div 的不透明度，每次鼠标经过该 div 时。出于某种原因，当我向包含不透明度的变量添加增量（例如 0.1）时，它不会从 1.1223408 增加到 2.1223408，而是增加到 1.12234080.1。似乎它把它当作一个字符串而不是一个数字来对待？

我想开始工作的代码是这样的：

function opacity(){

    $('.cell').css("backgroundColor", "black");
    $('.cell').css("opacity", 0);

    $('.cell').hover(function(){

    var value = $(this).css("opacity");

    if(value<1){
        value += 0.1;   
        $(this).css("opacity", value);
    }
}

我可以让它像我想要的那样工作的唯一方法是非常不优雅：

function opacity(){

$('.cell').css("backgroundColor", "black");
$('.cell').css("opacity", 0);

$('.cell').hover(function(){

    var value = $(this).css("opacity");

    if(value==0){
        value = 0.1;    
        $(this).css("opacity", value);
    }
    else if (0.1 < value < 0.2){
        value = 0.2;
        $(this).css("opacity", value);
    }
    else if (0.2 < value < 0.3){
        value = 0.3;
        $(this).css("opacity", value);
    }
    else if (0.3< value < 0.4){
        value = 0.4;
        $(this).css("opacity", value);
    }
    else if (0.4< value < 0.5){
        value = 0.5;
        $(this).css("opacity", value);
    }
    else if (0.5 < value < 0.6){
        value = 0.6;
        $(this).css("opacity", value);
    }
    else if (0.6 < value < 0.7){
        value = 0.7;
        $(this).css("opacity", value);
    }
    else if (0.7 < value < 0.8){
        value = 0.8;
        $(this).css("opacity", value);
    }

}, function(){

    value -= 0.15;
    $(this).css("opacity", value)
});

}

为什么第一个解决方案不起作用？

【问题讨论】：

标签： javascript jquery html css opacity

【解决方案1】：

.css("opacity") 将返回字符串。所以你必须使用parseFloat 将其转换为数值，然后再进行一些数学运算。

$('.cell').hover(function(){
  var value = parseFloat($(this).css("opacity"));    
  if(value<1){
    value += 0.1;           
    $(this).css("opacity", value);
  }
});

您也可以在每次触发悬停时使用+=0.1 作为opacity 的值，不要担心不透明度超过1 值，不会发生这种情况。在内部，其最大值始终为1。

$('.cell').hover(function(){
  $(this).css("opacity", "+=0.1");
});

【讨论】：

修复了它！谢谢！

【解决方案2】：

您的代码中似乎缺少悬停功能的结束大括号/括号，请参见下文：

function opacity(){

  $('.cell').css("backgroundColor", "black");
  $('.cell').css("opacity", 0);

  $('.cell').hover(function(){
    var value = $(this).css("opacity");

    if(value<1){
        value += 0.1;   
        $(this).css("opacity", value);
    }
  }, function(){
    //do something on mouseout
  });

}

【讨论】：

【解决方案3】：

您很可能将其作为字符串获取。为确保您获得正确的类型，请使用parseFloat。此外，如果您将起始不透明度更改为其他数字，您可以将悬停函数钳位写入 1，这样如果您从 0.5 开始，它就不会停止在 0.95。

function opacity() {

    $('.cell').css("backgroundColor", "black");
    $('.cell').css("opacity", 0);

    $('.cell').hover( function() {

       var value = parseFloat($(this).css("opacity"));
       value += 0.1;
       $(this).css("opacity", Math.min(value, 1));

    });

}

【讨论】：