Autor Tema: Javascript jQuery animación efecto cierre lento método fadeUp función anónima (Leído 3440 veces)

Adum · « **en:** 25 de Octubre 2016, 07:34 »

Hola buen dia, soy nuevo en este foro, espero me puedan ayudar en lo siguiente...

Estoy creando una galeria de imágenes, pero tengo dos problemas que no se como realizar. El primero es que al hacer click a una imagen quiero que el div superior (#titulo) se cierre lentamente y no tan brusco como lo hace. Y en segundo lugar que al dar click en una imagen cualquiera esta abra el div titulo (esto ya lo hace), pero al pulsar nuevamente la misma imagen el div titulo se haga display:none , es decir oculte.

Código: [Seleccionar]

<script>

 

$(document).ready(function(){ 

	$("#titulo").css("display","none"); 

	$(".pulsa").click(function () { 

                if($("#titulo").css("display") == "block"){

			$("#titulo").slideUp("slow");
			$("#titulo").css("display","none");
			$("#contenido").css("display","block");
			var srcs = $(this).attr("src");
			document.getElementById("nuevo").src = srcs;
			$('#nuevo').css("display","none");
			$("#titulo").slideDown("slow");
			e.preventDefault();
		}else{
			$("#titulo").slideDown("slow");
			$("#titulo").css("display","block");
			$("#contenido").css("display","block");
			var srcs = $(this).attr("src");
			document.getElementById("nuevo").src = srcs;
			e.preventDefault();
		}

		$('#nuevo').css("display","block");
	});
}); 

</script> 

<body>
	<div id="titulo">
		<img id="nueva">
	</div>
	<div id="contenido">
    	<a href="#"><img class="pulsa" src="img/leon.jpg" width="250" height="150"></a>
    	<a href="#"><img class="pulsa" src="img/gato.jpg" width="250" height="150"></a>
    	<a href="#"><img class="pulsa" src="img/lobo.jpg" width="250" height="150"></a>
    	<a href="#"><img class="pulsa" src="img/oso.jpg" width="250" height="150"></a> 

        </div> 

</body>

Jorge lopez · « **Respuesta #1 en:** 30 de Octubre 2016, 16:53 »

El método fadeUp de JQuery, ademas de poder recibir el parámetro que controla el tiempo de animación del elemento ( "fast", "slow", o double en milisegundos, ejemplo: 1000) también puede recibir una función anónima la cual se ejecutara solo después que la animación concluya.

Este es un ejemplo que podrías probar en tu código:

Código: [Seleccionar]

$("#titulo").slideUp("slow", function(){
      
      $("#titulo").css("display","none");
      alert('El display none, se ejecuta después que termina el slideUp completamente.');
      
      });

En el siguiente código:

Código: [Seleccionar]

$("#titulo").slideUp("slow");
$("#titulo").css("display", "none");

El problema es que la linea del display none, se esta ejecutando antes de que termine la animación del elemento titulo, he aquí donde entra la función anónima para evitar esto.

Usar la función anónima funcionaria, entonces viéndolo desde ese punto de vista es una solución, pero a mi entender es redundancia, porque el mismo método fadeUp se encarga de hacer un display none al elemento involucrado. Puedes corroborar esto pulsando f12 en tu navegador para inspeccionar elementos y a continuación pulsa sobre una imagen y fijate en el cambio del valor de la propiedad display del elemento con id titulo en cada click que haces a una imagen.

Si eliminaras la linea de código:

Código: [Seleccionar]

$("#titulo").css("display", "none");
y dejaras solo esta:

Código: [Seleccionar]

$("#titulo").slideUp("slow");
a mi entender lo solucionaría todo.

Espero que te sea útil este comentario y cualquier otra duda, no dudes en preguntar.

Saludos!

Adum · « **Respuesta #2 en:** 31 de Octubre 2016, 06:30 »

Hola gracias Jorge Lopez por tu respuesta, de verdad me ha servido bastante y cumple con lo que queria. De todas formas quiero saber si existe alguna propiedad que me permita que la imagen tarde un par de milisegundo mas antes de que el div #titulo se oculte.
Me explico, al hacer click sobre la misma imagen funciona bien, ya que esta no debiese cambiar al ocultarse el div #titulo. Pero al cambiar la imagen 1 a la 3, o de la 2 a la 4 se puede ver el cambio de la imagen (id : #nuevo) antes que el div #titulo se oculte.

Creo que la velocidad del cierre del div #titulo esta bien ya que debe ser lento, lo que me gustaria saber si hay una propiedad que demore a la imagen #nuevo y tarde un par de milisegundo en ser visualizada.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: