使用js

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();从:hover

中删除css

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该有助于提高理解力，并且应该很容易适应你想做的事情。

img {
  border: 1px solid #000;
}
img {
  opacity: 0.05;
  filter: alpha(opacity=5);
  -webkit-transition: opacity 5s linear;
}
img:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 5s linear;
}
#msg2, #msg3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="picture.png" />
<div>Last clicked at opacity: <span id="msg"></span>
</div>
<div id="msg2">End of fade-IN transition</div>
<div id="msg3">End of fade-OUT transition</div>

<img src="foobar.png" style="width:369px;height:200px;">