javascript - show("slow") で追加されたテキストのみをアニメーション化する

Question

このコード: http://jsfiddle.net/GeAwB/では、たとえば jquery show("slow") を使用して、最後に追加されたコンテンツをアニメーション化したいと思います。

新しいコンテンツをいくつかの div new_div に入れました。

<div id="new_div" ></div>

これをメイン div "shanon"-div に追加します。

         <div id="shanon" style="height: 300px;"></div>

問題は、メイン div "shanon"-div 全体がアニメーション化されることです。最後に追加された行だけをアニメーション化する必要があります。

何か案が？

Answer 1

これを試して...

http://jsfiddle.net/GeAwB/6/

私の例のように、すべての行を要素でラップする必要があります。 div

次に、JavaScriptで..最後のdiv要素を見つけます。それをアニメーション化します....

$("#shanon").append($("#new_div").html()).find("div").last().hide().show("slow");

Answer 2

ボタンがクリックされるたびに、再利用するのではなく、新しい div を作成します<div id="new_div"></div>

コードは大幅に簡素化され、従うのがはるかに簡単になります

$(document).ready(function() {
    var $new_div, $shanon = $("#shanon"),
        $weiter = $("#weiter"),
        $zeile = $(".zeile");
    $weiter.removeAttr("disabled").click(function() {
        if (i < array.length) {
            if (i > 0) {
                $zeile.removeClass("zeile");
            }
            $new_div = $("<div/>").html(array[i]).hide().appendTo($shanon).show("slow");
            i = i + 1;
        }
        else {
            $zeile.removeClass("zeile");
            $weiter.attr("disabled", "disabled");

        }
    });
});

フィドルの更新を見る

編集:zeileクラスの削除は正しくありません。$('.zeile')クリック ハンドラ内に戻す必要があります。非効率的ではありますが、別の回答が受け入れられているため、わざわざ変更を行うつもりはありません。

Answer 3

行間隔を台無しにしない別の可能性があります: http://jsfiddle.net/GeAwB/18/