1

div B別のの高さを変更する実行時間に応じて動的に更新するには、自分のWebサイトにが必要div Aです。[ ]内のいくつかのdivdiv Aでjqueryを使用しますが、現在の高さに一致するように（同時に）変更する必要があります。と中に含まれています：slideToggle()div Adiv Bdiv Apanel_toggle1panel1div A

$(document).ready(function () {
    $("#panel_toggle1").click(function () {
        $("#panel1").slideToggle("slow", function () {
            var divAheight = $("#divA").height();
            $("#divB").animate({ height: divAheight }, "slow");
        });
    });
});

上記のコードは基本的に私が望んでいたことを実行しますが、のために、他のdivでスライド効果を実行する前に終了するcallback()のを待ちます（終了するまでのファイナルを吐き出さないslideToggle()ため、これを強制されました）。sliteToggle()height()div A

div A両方をdiv B同時にスムーズに更新するためにこれを行う方法はありますか？つまり、高さが終了する前slideToggle()に更新されるようにする方法はありますか（オンと同時に呼び出すことができるように）？div A .animate()div Bdiv A

注：CSSのdivには固定の高さを使用していません。シンプルに保ちたいので、

または、 CSSだけでの高さdiv Bを一致させ続ける方法はありますか？div A

4

1 に答える 1

1

divAの固定ターゲット高さを設定できる場合、解決策は簡単です。たとえば、を設定することにより、アニメーションを同時に実行するように設定する必要がありますqueue=false。

元のアニメーションの結果の高さを知らずにこれらのアニメーションを同時に実行したいように思われるため、回避策は2つのアニメーションを使用して効果を実現することです。

var $divB = $("#divB");
$divB.animate({
   height: '600px' // some arbitrary height approaching target height
}, { duration: 5000 /* longer than the next animation */, queue: false });
$("#panel1").slideToggle({
   duration: 'slow', 
   queue: false,
   complete: function () {
       var divAheight = $("#divA").height();
       // stop the animation and begin another with the correct target height
       $divB.stop().animate({ height: divAheight }, "slow");
   }
});

ここでは、両方のdivが同時にアニメーション化を開始します。slideToggleアニメーションが完了すると、コードはdivBの高さアニメーションを停止し、divB=divAの高さの新しい高さアニメーションを開始します。ちょっとハッキーですが、更新された高さを取得するには、最初のアニメーションが完了するまで待つ必要があります。

もう1つのオプションは、slideToggleの結果の高さを取得するための計算を実行してから、同時アニメーションを実行することです。

var newHeight = $("#divA").height() - $("#panel1").height(); 
var $divB = $("#divB");
$divB.animate({
   height: newHeight + 'px'
}, { duration: 'slow', queue: false });
$("#panel1").slideToggle({
   duration: 'slow', 
   queue: false
});
于 2013-01-12T14:47:40.670 に答える