获取更新的CSS属性值

Question

是否有一种方法可以提取用jQuery动态更新的CSS属性的值？例如，div可以从0不透明开始。在每次悬停时，div都会添加更多的不透明度，因此通过jQuery获取不透明度将在第一次悬停时捕获原始不透明度，而在每次附加悬停时都会捕获新的不透明度。

在jsfiddle中，我让它通过创建一个新的数据属性来工作，但是我想用更新的属性代替。在获取不透明度属性的示例中，您可以看到，在2次悬停后，变量不再正确更新。

(https://jsfiddle.net/nvr6qx3k/4/)

​

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

	var opacity = parseInt($(this).css("opacity")) || 0;
  opacity = opacity + 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 1

CSS不透明度值从0到1。

一次100%

所以不透明=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

嗨，我想你应该开始使用0.2的不透明度，因为css的不透明度最大值是1。也许每个鼠标都添加0.2。使用parstInt代替parseFloat，因为parseInt只能返回0的(0.5)，这就是为什么不能获得当前不透明度的值。

检查一下这个：

​

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

	var opacity = parseFloat($(this).css("opacity")) || 0;
  opacity = opacity + 0.2;
 	$(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>

​