使用不透明度在 Jquery 中切换可见性？

Question

在我提出问题之前，我想声明，我一直在寻找这个答案的帮助比我想承认的要长，而最初的一些有趣的游戏网站实际上已经开始惹恼了地狱出乎我的意料，我想不通。

现在解决问题。我已经在网上寻找解决方案，但只找到了切换 div/a 可见性的方法，使它们在隐藏时消失，无论是使用 css 还是使用 show/hide jquery 函数。

我需要图像占用的空间保留在那里，以便可以再次单击它以再次切换可见性，我的想法是如果我将图像的原始不透明度设置为 0，然后当用户单击它时，它变得可见。这很好用，但是一旦我再次单击它就不会消失。

var t = $(this);

$("a").click(function() {
  if ($(t.children("img:first").css('opacity') === '0')) {
    $(this).children("img:first").css("opacity", "1");
  } else if ($(t.children("img:first").css('opacity') === '1')) {
    $(this).children("img:first").css("opacity", "0");
  }
}); 

在此我使用锚标记使整个区域可点击。这应该允许用户单击图像所在的位置，它变得可见，然后应该允许用户再次单击它以使其不可见。

<a id="image1"> 
<img src="1.png" />
</a>

这就是我如何根据点击的标签选择图像的方式。

Answer 1

尝试使用toggleClass()。 注意：边框样式仅用于演示目的。

$("a").on('click', function() {
  $(this).children('img:first').toggleClass('image--opaque');
});

a {
  display: inline-block;
  border: 1px solid;
}

.image {
  vertical-align: middle;
  opacity: 0;
}

.image--opaque {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="image1">
  <img class="image" src="http://placehold.it/350x150" width="350" height="150" />
</a>

Answer 2

似乎一种快速的方法是在事件侦听器中使用一个简单的三元表达式：

$("a").on("click", function() {
    $(this).css({ "opacity": $(this).css("opacity") == 1 ? 0 : 1 });
});

虽然简短而甜蜜，但这可能不是最实际的情况。基于类的方法将更容易扩展到更复杂的场景。像这样：

$("a").on("click", function() {
    $(this).toggleClass("hidden");
});

然后用一点 CSS 来补充它：

a {
    opacity: 1;
}
.hidden {
    opacity: 0;
}

还有更短的单行语句，可以通过一点类型转换来执行，但它比简单的三元表达式更进一步降低了性能。

来源：https://jsperf.com/boolean-int-conversion/2

Answer 3

在元素上使用toggleClass("transparent")。其中transparent 类将有opacity:0。添加transition会更有效

$("a").click(function(){
    $(this).find("img:first").toggleClass("transparent");
});

$("a").click(function(){
    $(this).find("img:first").toggleClass("transparent");
}); 

#image1 img{
  opacity:1;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
}
#image1 img.transparent{
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="image1"> 
<img src="https://www.gravatar.com/avatar/e9f8e786cd329c73cd37f633d63be4de?s=328&d=identicon&r=PG&f=1" />
</a>
<br/>
overflow content