Increasing opacity of div with jquery hover

Question

I am using jquery hover to increase the opacity of a div incrementally in a grid of divs with each pass of the mouse over that div. For some reason, when I add an increment, say 0.1 to the variable I have containing the opacity, instead of going from 1.1223408 to 2.1223408 it increments to 1.12234080.1. It almost seems like it's treating it like a string instead of a number?

The code I want to get to work is this:

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);
    }
}

The only way I could get it to work somewhat like I wanted is pretty inelegant:

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)
});

}

Why isn't the first solution working?

Answer 1

.css("opacity") will return string. So you have to use parseFloat to turn it to the numeric value before performing some maths operation.

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

You can also use +=0.1 as the value for the opacity each time hover is triggered, don't worry about the opacity exceeding the 1 value, that won't happen. Internally its maximum value is always 1 .

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

Answer 2

It looks like you have a missing end brace/bracket for your hover function in your code, see below:

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
  });

}

Answer 3

It's quite possible you are getting it as a string. To ensure you're getting the proper type, use parseFloat . Also, in case you ever change your starting opacity to some other number, you can write your hover function clamp at 1, so that it won't stop at 0.95 if you start at 0.5.

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));

    });

}