更新されたCSSプロパティ値を取得する

Question

jQueryで動的に更新されたCSSプロパティの値を取得する方法はありますか？たとえば、divは0の不透明度で開始できます。それぞれのホバーでは、divに不透明度が追加されるため、jQueryで不透明度を取得すると、最初のホバー時の元の不透明度と、追加のホバーごとの新しい不透明度が取得されます。

jsfiddleでは、新しいデータプロパティを作成して作業していますが、代わりに更新されたプロパティを取得します。 Opacityプロパティを取得する例では、2つのホバーの後に、変数が適切に更新されないことがわかります。

（https://jsfiddle.net/nvr6qx3k/4/）

$(".row").on("mouseover", "div", function() { 
 

 
\t var opacity = parseInt($(this).css("opacity")) || 0; 
 
    opacity = opacity + 1; 
 
    \t $(this).css("opacity", opacity); 
 
    console.log("opacity is " + opacity); 
 
    
 
    var count = parseInt($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>

Answer 1

CSSの不透明度値が100％

したがって不透明度をbeeingて0から1
1にある= 2は意味をなさない。

マウスオーバーでは、0.1を追加する必要があります。その効果を確認できます。
も... parseInt()は

のでparseFloatの使用は浮動小数点数を盗ん方が良いです...整数を返します。
;）

var opacity; 
 

 
$(".row").on("mouseover", "div", function() { 
 

 
    opacity = parseFloat($(this).css("opacity")) || 0; 
 
    opacity = opacity + 0.1; 
 
    $(this).css("opacity", opacity); 
 
    console.log("opacity is " + opacity); 
 
    
 
    var count = parseInt($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>

Answer 2

こんにちは私は、CSSの不透明度の最大値は1多分0.2すべてのマウスを超える追加しているので、あなたが0.2不透明に開始すべきだと思います。 parseIntは（0.5）の0を返すことができるので、現在の不透明度の値を取得できないため、parseIntを使用します。この

チェック：

$(".row").on("mouseover", "div", function() { 
 

 
\t var opacity = parseFloat($(this).css("opacity")) || 0; 
 
    opacity = opacity + 0.2; 
 
    \t $(this).css("opacity", opacity); 
 
    
 
    var count = parseFloat($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>