jQuery .css ("opacity", "+ = 0.1") se comporte bizarrement

Question

J'ai fait ce petit truc de type 'etch a scetch' et j'ai voulu augmenter l'opacité d'un peu jusqu'à l'opacité complète chaque fois que l'évènement mouseenter est déclenché . je me suis tout fonctionne, mais pour la vie de moi je ne peux pas comprendre pourquoi ne pas l'opacité aller tout le chemin jusqu'à 1.

$(document).on("mouseenter", "td", function() { 
    $(this).css("background","black").css({ 
     opacity: function (index, value) { 
      return parseFloat(value) + 0.1; 
     } 
    }); 
}); 

CSS:

td, tr {  
    opacity:0.5; 
    width:auto; 
    height:auto; 
} 

Si je mettre le css à 1, l'événement mouseenter le rend complètement noir. Si c'est 0.5, mouseenter commence à 0.5 et passe à '1' dans debugg, mais en réalité il ressemble à 0.7. et si j'enlève .css("background","black") et/ou ajoute background:black; en CSS. Le code ne fait rien.

Link to the full code

Answer 1

C'est parce que vous avez une opacité de jeu de 50% sur le tr, même si vous avez une opacité de 100% sur le td, il sera fanée par la ligne. Il suffit de diviser le CSS:

td,tr { 

    width:auto; 
    height:auto; 
} 
td{ 
    opacity : 0 
} 

Fiddle: http://jsfiddle.net/hSgh8/5/

Answer 2

Vous mettez à jour que l'opacité sur le td si bien qu'il est totalement opaque, la tr contenant est encore à 50% d'opacité, et par conséquent la tout est de 50%