Tengo este contenido que dejo desaparecer haciendo clic en un botón. Como quiero hacer esto con una transición suave, uso la opacidad para eso. Pero aquí está el problema:
El contenido está encima de otro contenido a través de z-index. Si el contenido está oculto, quiero hacer clic en el Contenido que se revela. Para ocultar el contenido utilizo el siguiente código:
$('.close-button').click(function(e) { $('.hidden-content').css({ "opacity":"0" }); });Para resolver mi problema, solo podría cambiar el índice z en la misma función. Pero si hago eso, pierdo mi transición suave de desaparecer ese contenido. Entonces, lo que necesito es otro código que se ejecute después del anterior y cambie el índice z solo después de que la opacidad se establezca sin problemas en 0. Para esto, probé algunas declaraciones if como las siguientes:
var hide = $('.hidden-content').css('opacity'); if (hide == 0) $('.hidden-content').css({ "z-index":"-1" });y también:
$(function() { if ($('.hidden-content').css('opacity') == 0) $('.hidden-content').css({ "z-index":"-1" }); });Nada parece funcionar. Parece una pieza pequeña pero ya me costó horas. Es por eso que creé una cuenta aquí y busqué ayuda ya que muchas publicaciones me ayudaron en el pasado.
Y antes de que olvide mencionar: soy bastante nuevo en todo esto, así que tal vez haya una solución súper fácil (con suerte).
Si necesita más información, por favor hágamelo saber. ¡Gracias!
Si está cambiando la opacidad usando una animación CSS, puede crear un fotograma clave al final de la animación para cambiar el índice z.
Entonces, si tienes una animación que se ve así:
@keyframes opacityanimation { 0% { opacity: 100; } 100% { opacity: 0; } }Puede modificarlo para cambiar el índice z al final:
@keyframes opacityanimation { 0% { opacity: 100; } 99% { opacity: 0; } 100% { opacity: 0; z-index: -1; } }Tenga en cuenta que también debe establecer la opacidad en 0 al final.
Puede animar la opacidad y luego cambiar el índice z, cuando la animación esté completa:
$('.close-button').click(function(e) { $('.hidden-content').animate({"opacity":"0"}, function(){ $(this).css({"zIndex":"-1"}) }); });