javascript - 用js从css中拉取变量

Question

我试图在单击图像时执行一项操作，但仅当图像完全不透明时才发生

function func() {
  if ($('.Absolute-Center').css('opacity') == 1) {
    alert("it works");
  }
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
img.Absolute-Center {
  opacity: 0.05;
  filter: alpha(opacity=5);
  -webkit-transition: opacity 20s linear;
}
img.Absolute-Center:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 20s linear;
}

<img src="picture.png" class="Absolute-Center" onclick="func()" />

Answer 1

尝试使用 transitionend 事件、.addClass()、.removeClass() ；从 css

中删除 :hover

function func(e) {
  if ($(this).css("opacity") == 1) {
    alert("it works");
    $(this).removeClass("clicked")
  }
};

$(".Absolute-Center").on({
  "click": function() {
    $(this).addClass("clicked")
  },
  "transitionend": func
})

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
img.Absolute-Center {
  opacity: 0.05;
  filter: alpha(opacity=5);
  transition: opacity 20s linear;
}
img.Absolute-Center.clicked {
  opacity: 1;
  filter: alpha(opacity=100);
  transition: opacity 20s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="http://lorempixel.com/50/50" class="Absolute-Center" />