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!