17

私はULを持っており、アニメーションを使用してULの上部に新しいLIを動的に追加するように取り組んでいます。

私はこれまでに次のものを持っていますが、これは問題なく機能します：

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#containerULです

上記の問題は、UL全体を非表示にしてから、UL全体を下にスライドさせることです。アニメーション化するために、追加された新しいLIが必要です。

アイデア？thxs

4

2 に答える 2

41

.prependTo()次のように、を使用して少し簡単にやりたいことを行うことができます$(html)。

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

上記のコードのデモをここで見ることができます

.prepend()付加された1つまたは複数の要素ではなく、付加された要素を返します。切り替えて.prependTo()少しすっきりさせ、追加した要素をチェーンし続けることができるので、希望する効果が得られるはずです。また、同じ文字列を何度も使用している場合、これによりドキュメントフラグメントがキャッシュされ、高速化されます:)

最後に、これを複数回行う場合は、のID<li>が一意であることを確認してください。そうしないと、不要なHTMLが作成され、望ましくない副作用が発生します。

于 2010-05-21T14:59:20.590 に答える
0

http://jsfiddle.net/eCpEL/13/

これは役立つはずです

キーフレームアニメーションの使用

.comefromtop {
    animation: comefromtop 0.5s;
}
.pushdown {
    animation: pushdown 0.5s;
}

@-webkit-keyframes comefromtop {
  0%   { opacity:0; -webkit-transform: translateY(-100%); }
  100% { opacity:1; -webkit-transform: translateY(0px);   }
}

@-webkit-keyframes pushdown {
  0%   { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
  100% { /*opacity:1;*/ -webkit-transform: translateY(0);   }
}

そして基本的なJavaScriptを使用する

function add() {
    var val = $('#input').val();
    var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val);         $('#Trees').prepend(item).addClass('pushdown');
    setTimeout(function () {
        $('#Trees').removeClass('pushdown');
    }, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
    if (e.keyCode === 13) {
        add();
    }
});

あなたは敬虔さを達成することができます。

于 2015-09-08T21:36:23.410 に答える