色々と駆使して今更チャットを作ってみたわけですが、適当に追加していると、本当に追加されているのかよく分からない場合があります。 元々はこんな感じです。

1
2
3

    var add_log = function(text){
$('#for_ajax').prepend("<p>" + text + "</p>");
};

で、それを以下のようにやってみました。

1
2
3

    var add_log = function(text){
$('#for_ajax').hide().prepend("<p>" + text + "</p>").fadeIn();
};

fadeInだけだと、エフェクトがかからないので一旦hideしてやらないといけないようです。 ただ、これだと今までに書いてある記事もすべて消えてから、全体にfadeInがかかるのでいまいちな感じです。 新しく追加する部分だけにエフェクトが欲しいと思って調べてみたところ、ありました。

1
2
3

    var add_log = function(text){
$("<p>" + text + "</p>").hide().prependTo('#for_ajax').fadeIn();
};

すでにある要素に新しい記事を挿し込む、という順序ではなく、新しい記事をすでにある要素に挿し込む、という順序でやれば、新しい記事だけにエフェクトを掛けてやることが可能でした。 どちらを主体にするかでエフェクトの範囲を決めることができます。 リファレンスを見ていると、appendToとかprependToとかをどういう風に使うのか不思議だったのですが、ようやく使い方を発見した感じです。 これは、なかなか良いですね。