[jQuery-es] Overflow de texto en efectos

Mie Dic 13 02:07:27 PST 2006

Buenas,

tengo un pequeño problema con las animaciones. Explico:

- Uso show('slow') para mostrar un DIV con fondo y borde, etc.
- Dentro de ese DIV tengo un enlace que muestra un contenido generado  
en el javascript.
- Ese contenido que genero y muestro, se sale del DIV.

En IE6 no pasa este fallo, pero en Firefox, Safari, etc. sí. ¿Teneis  
alguna sugerencia? Adjunto el código.

Javascript:
$(document).ready(function(){
	$('#test div').hide();
	$('#test').children(':not(:first)').hide();

	$('#test h1').click(function() {
		$(this).next().toggle('slow');
	});

	$('#test a').click(function() {
		$(this).parent().next().prepend('<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.  
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat  
non proident, sunt in culpa qui officia deserunt mollit anim id est  
laborum.</p>');
		$(this).parent().next().append(document.createElement('DIV'));
		$(this).parent().next().toggle();
		return false;
	});
});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// 
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Page Title</title>
		<style type="text/css">
			.uno {
				background: red;
				border: 3px solid black;
				padding: 1em;
				margin: 1em;
			}
		</style>
		<script src="jquery.js" type="text/javascript" />
		<script src="test.js" type="text/javascript" />
	</head>
	<body>
		<div id="test">
			<h1>Prueba</h1>
			<div class="uno">
				<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. Duis aute irure dolor in  
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla  
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in  
culpa qui officia deserunt mollit anim id est laborum.</p>
				<p><a href="#" title="Prueba">Expandir más</a></p>
				<div>
				</div>
			</div>
		</div>
	</body>
</html>

--
Juan G. Hurtado
[ juan.g.hurtado en gmail.com ]
[ http://armonia.spiral-static.org/ ]