jQuery: div désenclencher à la taille complète après l'animation

Question

Dans l'exemple ci-dessous jQuery, j'ai une div dans un autre. Quand j'animer la div interne jusqu'à une largeur de 0, la div externe (qui présente le positionnement absolu), diminue en largeur avec elle.

est souhaitée.

Le problème est que, après l'animation est terminée, la div externe apparaît à sa taille d'origine. Est-ce prévu? Comment puis-je empêcher que cela se passe?

Merci!

Exemple

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

On dirait si je prends la largeur de la div « externe », et la outerWidth de la div « intérieure », puis soustraire la largeur de « extérieur » div de outerWidth de la div « intérieure », et d'animer la largeur « externe » le résultat en même temps tout en animant la « intérieure » de 0, il fonctionne.

Les avis sur ce que devrait être une demande de correction de bug pour jquery ou WebKit, ou les deux.

$('.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

Avez-vous essayé de régler la largeur outerbox à 0 après l'animation est terminée?

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

Answer 3

Pour moi dans Firefox 3.0.10 en utilisant jQuery 1.3.2 dans Ubuntu 9.04 cela fonctionne parfaitement. Peut-être il est une sorte d'interaction avec d'autres éléments HTML dans votre page?

Answer 4

Dans mes tests, cela fonctionne très bien dans IE, FF et Opera, mais produit le bug que vous mentionnez dans Chrome et Safari.