jQuery: pops div voltar ao tamanho normal após a animação

Question

No exemplo jQuery abaixo, eu tenho um div dentro de outro. Quando animar o div interna para baixo para uma largura de 0, o div externa (que tem o posicionamento absoluto), diminui em largura junto com ele.

Esta é desejada.

O problema é que após a animação estiver concluída, os pops div externa de volta ao seu tamanho original. É este o esperado? Como posso evitar que isso aconteça?

Obrigado!

Exemplo

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

Looks como se eu pegar a largura da div 'exterior', eo outerWidth da div 'interior', em seguida, subtrair a largura 'exterior' da div de outerWidth do div 'interior', e animar a largura 'exterior' com o resultado simultaneamente ao animar o 'interior' a 0, ele funciona.

Todas as opiniões sobre se esta deve ser uma solicitação de correção de bug para jQuery ou webkit ou 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

Você tentou definir a largura caixa coletiva a 0 após a animação está completa?

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

Answer 3

Para mim no Firefox 3.0.10 usando jQuery 1.3.2 no Ubuntu 9.04 isso funciona perfeitamente. Pode ser que é algum tipo de interação com outros elementos HTML em sua página?

Answer 4

Em meus testes, este bem no IE, FF e Opera funciona, mas produz o bug que você menciona no Chrome e Safari.