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

Answer 2

这应该有助于增进理解，并且应该很容易适应您的实际需求。

 $(function() { $('img').on('click', function() { var alpha = $(this).css('opacity'); $("#msg").text((alpha == 1) ? "full" : alpha); }).on('transitionend', function() { var alpha = $(this).css('opacity'); if (alpha == 1) { $("#msg2").fadeIn().delay(700).fadeOut(); } else { $("#msg3").fadeIn().delay(700).fadeOut(); } }); }); 

 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>