javascript - jQueryのinnerHTMLのスムーズな変更

Question

私は以下のコードを魅力のように機能させています：

var div = $('#div');
div.html('<div>one line</div><div>another line</div>');
div.slideDown('slow');

しかし、コンテンツ（行数）を変更する必要がある場合に問題が発生します。

div.html('<div>one line replacement</div><div>another line replacement</div><div>third line</div>')

この移行は速すぎます。これをアニメーション化する方法は？

score 6 · Accepted Answer

目に見えないスパンをhtmlに追加できます。

<span class="foo" style="display: none">some other lines</span>

そして、それらをフェードインします。

$("span.foo").fadeIn('slow');

編集を進めていくと、次のことも検討する必要があります。

div.slideUp('slow'); // you may want this to be 'fast'
div.html('some other lines');
div.slideDown('slow');

score 2 · Accepted Answer

ダニエル・スルーフの答えのしわ：

div.fadeOut('fast', function() {
  div.html(html);
  div.fadeIn('fast');
}

これにより、先に進む前に最初のアニメーションが確実に完了します。少なくとも私の現在のケースでは、フェードはスライドよりも優れたエクスペリエンスを提供します。

score 1 · Accepted Answer

たぶん、display：noneスタイルのdivに余分な行を入れると、次のようにそのdivをフェードインできます（概念-コードはテストされていません）：

div.html("<div id='next_line' style='display:none'>some other lines</div>");
$("#next_line").fadeIn('slow');

score 0 · Accepted Answer

一定の時間をかけたい場合は、次のようにします。

div.slideDown(numberOfMilliseconds);

score 0 · Accepted Answer

Thomas は「slideDown(numberOfMilliseconds)」について言及しました。私はそれを試してみました.jqueryのドキュメントは、速度をミリ秒単位で定義し、アニメーションの実行にかかる時間です。

その場合、1行でも10行でもスライドするのに同じ時間がかかります。行数がわかっている場合は、乗数を追加できます。たとえば、slideDown(lineCount * speedInMS)

5 に答える 5