jQuery: div aparece una copia a tamaño completo después de la animación

Question

En el ejemplo de jQuery a continuación, tengo un div dentro de otro. Cuando animar el div interior hacia abajo a un ancho de 0, el div exterior (que tiene el posicionamiento absoluto), disminuye en anchura a lo largo de la misma.

Esto es deseable.

El problema es que después de la animación se ha completado, el div exterior aparece de nuevo a su tamaño original. Se esperaba esto? ¿Cómo puedo evitar que esto suceda?

Gracias!

Ejemplo

html:

<div class="outer"><div class="inner">innerContent</div></div>

---

CSS:

div.outer {
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

---

javascript:

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
});

Answer 1

Parece que si agarro la anchura de la div 'exterior', y la outerWidth de la div 'interior', entonces restar la anchura del div 'exterior' de outerWidth el 'interior' de div, y animar la anchura 'exterior' al resultado simultáneamente mientras la animación de la 'interior' a 0, funciona.

Cualquier opinión sobre si esto debe ser una solicitud de corrección de errores para jQuery o webkit o ambos.

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth();
    var outerWidth = $('.outer').width();
    var theWidth = outerWidth - innerWidth;
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
    $('.outer').animate({width: theWidth}, 'slow');
});

Answer 2

¿Ha intentado ajustar el ancho de caja exterior a 0 después de la animación se ha completado?

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});

Answer 3

Para mí en Firefox 3.0.10 usando jQuery 1.3.2 en Ubuntu 9.04 esto funciona perfectamente. Puede ser que es algún tipo de interacción con otros elementos HTML en su página?

Answer 4

En mis pruebas, esto funciona bien en IE, FF y Opera, pero produce el error que mencionas en Chrome y Safari.