使用不透明度在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

在元素上使用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

Answer 3

看来，在事件中，一个简单的三元表达方式似乎是一种快速的方法：

：

$("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.app/boolean-int-conversion/2