Jquery insertBeforeとfadeIn

Question

jquery fadeInを使用してテーブル行をアニメーション化したいとします。これは私が今までに書いたコードに従っています。私が間違っている場所を教えてください。あなたが使用しているHTMLを提供する代わりに

$("#insert_heading").live("click", function (e) { 
    e.preventDefault(); 
    if ($("#first_msg")) { 
     $("#first_msg").fadeOut(500, function() { 
      $("#first_msg").remove(); 
     }); 
    } 
    if (heading_count >= 6) { 
     alert("you cannot create more than 6 headings"); 
     return false;; 
    } 

    var heading_html = ""; 
    heading_count++; 

    heading_html += '<tr class="heading" id="row_' + heading_count + '">'; 
    heading_html += '<td align="left">&nbsp;Heading ' + heading_count + ':</td>'; 
    heading_html += '<td colspan="3" align="left" valign="middle">'; 
    heading_html += '<input type="text" name="h_' + heading_count + '" class="input validate[required] text-input"/>'; 
    heading_html += '<td align="left" class="heading_delete">'; 
    heading_html += '<a href="#" id="del_' + heading_count + '"><img width="16" height="16" title="Delete" src="images/delete_heading.png"></a></td>'; 
    heading_html += '</td>'; 
    heading_html += '</tr>'; 

    $(heading_html).insertBefore("#submit_button").fadeIn("slow"); 
}); 

Answer 1

、私はあなたのfadeInコードの主な問題は、あなたがすでに要素を追加したことであり、それがすでに表示なのでfadeInは効果がありませんと思います。

私は、実行の順番を少しずつ切り替えることでこの問題を解決することができました。 insertBeforeを使用するのではなく、私がappendを使用して、新しいtr要素の創造にfadeInをチェーン：これはここで実証され見ることができます

$('table').append($(heading_html).fadeIn("slow")); 

：http://jsfiddle.net/HZwvA/