Sichtbarkeit in Jquery mit Opazität umschalten?

Question

Bevor ich zu meiner Frage komme, möchte ich feststellen, dass ich länger nach Hilfe für diese Antwort gesucht habe, als ich zugeben möchte, und was als eine kleine, spaßige Website für ein Spiel begonnen hat, hat wirklich angefangen zu nerven von mir, dass ich es nicht herausfinden kann.

Jetzt auf das Problem. Ich habe online nach Lösungen dafür gesucht und habe nur Wege gefunden, die Sichtbarkeit eines div/a umzuschalten, so dass sie verschwinden, wenn sie ausgeblendet werden, entweder mit CSS oder mit show/hide jquery Funktionen.

Ich brauche den Platz, den das Bild braucht, um dort zu bleiben, so dass es wieder angeklickt werden kann, um die Sichtbarkeit wieder zurückzuschalten. Mein Gedanke ist, wenn ich die ursprüngliche Deckkraft des Bildes auf 0 setze und dann klicke es wird sichtbar. Das funktioniert ganz gut, aber sobald ich es erneut anklicke, wird es nicht verschwinden.

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 diesem verwende ich Anker-Tags, um einen ganzen Bereich anklickbar zu machen. Dies sollte dem Benutzer ermöglichen, auf den Ort zu klicken, wo das Bild sein würde, es wird sichtbar und sollte dann dem Benutzer erlauben, es erneut anzuklicken, um es unsichtbar zu machen.

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

das ist, wie ich das Bild auswählen, wird es angeklickt, je nach dem Tag holen.

Answer 1

Versuchen toggleClass() verwenden. Hinweis: Das Randstyling dient nur zu Demonstrationszwecken.

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

Verwenden Sie toggleClass("transparent") auf dem Element. wo transparent Klasse wird opacity:0 haben. Hinzufügen transition wird effektiver

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

Es scheint, dass eine schnelle Möglichkeit, dies mit einem einfachen ternären Ausdruck in dem Ereignis-Listener zu erreichen ist:

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

Wenn auch kurz und süß zu sein, kann dies nicht sein das praktischste Szenario. Ein klassenbasierter Ansatz wäre viel mehr in komplexere Szenarien erweiterbar. Wie so:

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

Und dann ein bisschen CSS es zu ergänzen:

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

Es gibt noch kürzeren Einzeiler, die mit etwas Art Casting durchgeführt werden können, aber der Abbau sie die Leistung selbst weiter als ein einfacher ternärer Ausdruck.

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