jQuery: div si apre di nuovo a schermo intero dopo l'animazione

Question

Nell'esempio jQuery qui sotto, ho un div all'interno di un altro. Quando sono animare il div interno fino ad una larghezza di 0, div esterno (che ha posizionamento assoluto), si riduce in larghezza con esso.

Questa è desiderata.

Il problema è che, dopo l'animazione è completa, il div esterno apre di nuovo alle sue dimensioni originali. È questo previsto? Come posso evitare che ciò accada?

Grazie!

Esempio

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

Sembra che se prendo la larghezza del div 'esterna', e l'outerWidth del div 'interiore', quindi sottrarre la larghezza 'esterna' del div dal outerWidth del div 'interiore', e animare la larghezza 'esterno' al risultato simultaneamente mentre animare la 'interno' a 0, funziona.

Tutte le opinioni sopra se questo dovrebbe essere una richiesta di bug fix per jQuery o WebKit o entrambi.

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

Hai provato impostando la larghezza imballo a 0 dopo l'animazione è completa?

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

Answer 3

Per me in Firefox 3.0.10 utilizzando jQuery 1.3.2 in Ubuntu 9.04 Questo funziona perfettamente. Può essere che sia un qualche tipo di interazione con altri elementi HTML nella tua pagina?

Answer 4

Nel mio test, questo funziona bene in IE, FF e Opera, ma produce il bug si parla in Chrome e Safari.