Toggling visibility in Jquery using Opacity?

Question

Before I get into my question I want to state that I have been looking for help to this answer for longer than I would like to admit and what started as some a little fun website for a game has actually started to annoy the hell out of me that I cant figure it out.

Now onto the problem. I have looked online for solutions to this and have only found ways to toggle the visibility of a div/a making them disapear when made hidden, either using css or using show/hide jquery functions.

I need the space that the image takes up to remain there so it can be clicked again to toggle the visibility back again, my thought process being if I set the original opacity of the image to 0 and then when the user clicks it, it becomes visible. This works just fine, but once I click it again it won't go away.

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");
  }
}); 

In this I am using anchor tags to make an entire area clickable. This should allow the user to click the location where the image would be, it becomes visible and then should allow the user to click it again to make it invisible.

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

this is how I select the image it will pick depending on the tag clicked.

Answer 1

Use toggleClass("transparent") on the element. where transparent class will have opacity:0 . Adding transition will be more effective

$("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 2

Try using toggleClass() . Note: The border styling is just for demonstrative purposes.

 $("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 3

It seems that a quick way to accomplish this is with a simple ternary expression in the event listener:

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

Albeit being short and sweet, this may not be the most practical scenario. A class-based approach would be much more extendable into more complex scenarios. Like so:

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

And then a bit of CSS to complement it:

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

There's even shorter one-liners that can be conducted with a bit of type casting, but it degradates the performance even further than a simple ternary expression.

Source: https://jsperf.com/boolean-int-conversion/2