アニメーション付きで div を展開

StackOverflow https://stackoverflow.com/questions/687284

  •  22-08-2019
  •  | 
  •  

質問

ajax呼び出しからコンテンツを受信して​​いるdivがあります。現時点では、ajax コールバック ハンドラーでこれを実行しているだけです。

function searchCallback(html) { $("#divSearchResults").html(html); }

これにより、コンテンツがページ上に「ポップ」され、非常に唐突になります。.slideToggle() メソッドのように、div のサイズを適切に変更する方法はありますか?

役に立ちましたか？

解決

最初から隠しておくこともできます。次に、HTML を挿入し、その関数が完了したら、それに表示エフェクトを実行します。(スライドの切り替えのように)

他のヒント

非表示になっていることを確認してから、コンテンツを追加し、スライドして挿入します。

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

または、フェードインすることもできます。

$("#divSearchResults").fadeIn();

コンテンツが表示されたときにページが「爆発」しないようにするには、div が非表示になっていることを確認してください。また、コンテンツを追加したら、ページが適切に表示されることを確認してください。

これがうまくいくかどうかはわかりませんが、試してみる価値はあります。

  • 現在の div サイズを確認し、固定に設定します。
  • HTMLを更新する
  • 高さと幅を「自動」にアニメーション化します。

確かに、これを試してみることもできます:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

あまり美しいものではありませんが、うまくいくでしょう。クラス「hidden_​​insert」の CSS スタイルを作成して、そのクラスの要素をデフォルトで非表示にすることで、さらにきれいにすることができます。また、この日付の送信元であるバックエンドで、JavaScript の代わりにそこでラッピングを行うこともできます。スクリプトは次のように簡略化できます。

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

どちらもテストしていませんが、機能するはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top