0

ここに画像の説明を入力

#div1が にpadding-left設定されていると仮定し50pxます。特定のボタンを押すと、パディングが0アニメーションで変化します:

$('button').click(function(){
    $('#div1').animate({'padding-left':0}, 1000);
});

#div2はブロックなので、一緒にサイズが変わります#div1。

問題の核心は、 jQuery を使用して#div2 width値を転送したいです。<div id="div2" style="width: [HERE]"></div>そして、#div1アニメーション化されると#div2 width、スタイル属性の値が変化し始めます。の幅がどのように#div2変化しているかをブラウザーの開発者ツールで確認したいと思います。このようなもの：

リリースされたボタン:

`<div id="div2" style="width: 200"></div>`
`<div id="div2" style="width: 211"></div>`
`<div id="div2" style="width: 224"></div>`
`<div id="div2" style="width: 235"></div>`
`<div id="div2" style="width: 244"></div>`
`<div id="div2" style="width: 250"></div>`

1 秒後:

`<div id="div2" style="width: 250"></div>`
`<div id="div2" style="width: 250"></div>`
`<div id="div2" style="width: 250"></div>`

どうすればできますか？

4

2 に答える 2

1

あなたが得ることができる最も近いものは、幅を計算し、autojQuery を使用して DOM スタイル プロパティを更新するようなものです。.attr 

$("button").click(function(){
    $("#div1").animate(
        {
            marginLeft: 0
        }, {
            step: function(){
                $('#div2').width('auto');
                var width = $('#div2').width();
                $('#div2').attr('style', 'width: ' + width + 'px;');
            }
        }, 5000
    )
});

ブラウザのインス​​ペクタは瞬時に変更されるわけではないため、全体としてこれはあまり役に立ちません。そのため、次の値にジャンプします。さらに、変更をインラインで表示する必要はありません。別の要素を介して変更を表示したい場合 (これは即時の変更を示します)、David Link のフィドルの更新バージョンと同じアプローチを使用して表示できます。

于 2013-11-12T14:14:40.690 に答える