jQuery: .animate + .hide + .remove !!!

hector2c · #1 (**permalink**) 03/10/2008, 07:56

tengo un listado de divs, deseo que al hacer click en cerrar, cada div haga los siguientes pasos:

1. se vuelva transparente.
2. se oculte (eso hace que el espacio en blanco disminuya hasta cero).
3. finalmente, para ahorrar rendimiento, deseo que el div (el código en si) desaparesca.

hice lo siguiente:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DEMO - Desaparecer elementos web con jQuery</title>

<script type="text/javascript" src="extras/js/jquery/jquery-1.2.6.min.js.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>

<script type="text/javascript">
$(document).ready(function(){
						   
	$(".contenedor .eliminar").click(function(){
		var respuesta = confirm("¿Desea agregar esta reserva?");
		if (respuesta){
			$(this).parents(".contenedor").animate({opacity: 0 }, "fast").animate({opacity: 0}, "fast").hide("fast");
		}
	});

});
</script>

<style type="text/css">
body {
	font-family:verdana, arial;
}
.contenedor {
	margin:20px auto;
	background:#F5E38E;
	padding:10px;
	width:500px;
	position:relative;
}

.contenedor .eliminar {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
h2 {
	color:#ff0000;
	font-size:15px;
}
p {
	font-size:11px;
	padding: 0 0 11px;
	color:#333;
}
a {
	color:#ff8400;
}
</style>
</head>

<body>
<div class="contenedor">
	<h2>Lorem ipsum 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<p><a href="http://blogandweb.com/2008/05/12/desaparecer-elementos-web-con-jquery/">Regresar al tutorial</a></p>
	<img src="eliminar.png" alt="cerrar" class="eliminar" />
</div>

<div class="contenedor">
	<h2>Lorem ipsum 2</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<p><a href="http://blogandweb.com/2008/05/12/desaparecer-elementos-web-con-jquery/">Regresar al tutorial</a></p>
	<img src="eliminar.png" alt="cerrar" class="eliminar" />
</div>

<div class="contenedor">
	<h2>Lorem ipsum 3</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<p><a href="http://blogandweb.com/2008/05/12/desaparecer-elementos-web-con-jquery/">Regresar al tutorial</a></p>
	<img src="eliminar.png" alt="cerrar" class="eliminar" />
</div>

</body>

</html>

luego de terminar el hide, deseo aplicar remove, a primera vista es sencillo, pongo el .remove(), pero, eso hace que se elimine el div, antes de hacer el efecto de ocultación...

espero puedan ayudarme, muchas gracias !!!

#2 (**permalink**) 03/10/2008, 08:13

1. A la función hide() le puedes pasar una velocidad y una función a la que se llame al terminar el efecto. Por ejemplo:

Código javascript:

Ver original$(this).hide(2000, function () {
        $(this).remove();
});

2. ¿Por qué llamas dos veces a animate con {opacity: 0}?