2

以下の jQuery の例では、1 つの div が別の div の中にあります。内側の div を幅 0 までアニメーション化すると、外側の div (絶対配置) の幅がそれに伴って減少します。

これは望ましいことです。

問題は、アニメーションが完了した後、外側の div が元のサイズに戻ることです。これは期待されていますか？どうすればこれが起こらないようにできますか?

ありがとう！

例

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');
});
4

4 に答える 4

4

「外側」divの幅と「内側」divのouterWidthを取得し、「内側」divのouterWidthから「外側」divの幅を減算し、「外側」幅を結果にアニメーション化すると、次のようになります。 「インナー」を0にアニメートしながら同時に動作します。

これが jquery または webkit またはその両方のバグ修正要求であるべきかどうかについての意見。

$('.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');
});
于 2009-05-28T13:46:21.807 に答える
1

アニメーションが完了した後、outerbox の幅を 0 に設定してみましたか?

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});
于 2009-05-28T13:15:32.647 に答える
0

Ubuntu9.04でjQuery1.3.2を使用しているFirefox3.0.10の場合、これは完全に機能します。それはあなたのページの他のhtml要素とのある種の相互作用かもしれませんか？

于 2009-05-28T13:18:44.513 に答える
0

私のテストでは、これは IE、FF、Opera では問題なく動作しますが、Chrome と Safari では前述のバグが発生します。

于 2009-05-28T13:23:09.903 に答える