0

jquery fadeIn を使用してテーブルの行をアニメーション化したいと考えています。これは、これまでに書いたコードの一部です。どこが間違っているか教えてください。

$("#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");
});
4

1 に答える 1

1

使用している HTML を提供する代わりに、fadeInコードの主な問題は、要素を既に追加していて、既に表示されているため、fadeIn効果がないことだと思います。

実行順序を少し変えることで、これを機能させることができました。を使用するのではなくinsertBefore、 を使用して、新しい要素の作成にappendチェーンしました。fadeIntr

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

これは、http: //jsfiddle.net/HZwvA/で示されています。

于 2012-04-19T12:11:13.493 に答える