jquery - .beforeJqueryを含むFadeIn要素

Question

jqueryの.beforeを使用した後に要素をフェードインするにはどうすればよいですか？

jQuery

$('.button').on("click", function(event){
   var html = '';
   html = '<div class="row new">Test</div>';

   $('.content .row:first').before(html);
});

HTML

<a class="button">Insert me and fade me</a>
<div class="content">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

Answer 1

$(function() {
$('.button').on("click", function(event){
   var html = '';
   html = '<div class="row new">Test</div>';

   $('.content .row:first').before($(html).fadeIn());
});
});

Answer 2

$('.button').on("click", function(event){
   var html = '<div class="row">Test</div>';
   $('.content .row:first').before(html).prev().hide().fadeIn(1000);
});​

newクラスは不要です。最初の行が新しい行であることはすでに知っています（その後の挿入時にクラスを削除する必要があります）。

Answer 3

次の行を追加します。$('.row.new:last').hide().fadeIn();

jQuery：

$('.button').on("click", function(event) {
    var html = '';
    html = '<div class="row new">Test</div>';
    $('.content .row:first').before(html);
    $('.row.new:first').hide().fadeIn();
});​

jsFiddleの例。