Question

我想用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");
});

Answer 1

代替您提供您正在使用的HTML，我认为您的fadeIn代码的主要问题是您已经添加了该元素，并且它已经可见，因此fadeIn没有效果。

我设法通过稍微改变执行顺序来实现这一点。我使用insertBefore而不是使用append，并将fadeIn链接到新tr元素的创建：

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

这可以在这里看到：http://jsfiddle.net/HZwvA/

Jquery insertBefore和fadeIn

1 个答案: