Problema con animacion jquery

danieruval · #1 (**permalink**) 27/12/2012, 01:39

Que tal, tengo un problema, soy nuevo usando jquery. Quiero animar el div "container" de tal forma que si le doy click se expanda, y si le doy click al div "close", se contraiga.

Solo que al momento de dar click en "close", "container" se contrae y se vuelve a expandir.

Espero alguien me pueda ayudar :)

Este es mi codigo html

Código:

<html>
	<head>
		<style type="text/css">
			.container{
				height: 50px;
				width: 50px;
				background-color: red;

			}
			

			.close{
				float: left;
				height: 30px;
				width: 50px;
				background-color: brown;				
				color:#FFF;
			}
		</style>

		<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		
		<div class="container">
			<div class="close">X</div>
		</div>
		

	</body>
</html>

y este mi codigo jquery

Código:

$(document).ready(function() {

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

		$(this).animate({
        	height: "100px"

  		}, 500);
	});
	

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

		$(".container").animate({
        	height: "50px"

  		}, 500);
	});
});

David · #2 (**permalink**) 27/12/2012, 06:14

Porque el evento se propaga y llega también a .container cuando haces click en .close, debes detener la propagación del event:

Código Javascript:

Ver original$(".close").click(function(e) {
    e.stopPropagation();
    // resto del código
});

http://api.jquery.com/event.stopPropagation/