CODEWITHSUNDEEP
javascriptjqueryhtml
MFN
MFN

Reputation: 45

Jquery insertBefore and fadeIn

I want to animate my table rows with jquery fadeIn. This is following peiece of code which i have written so far. please tell me where i am mistaken.

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

Upvotes: 0

Views: 2551

Answers (1)

Jamiec
Jamiec

Reputation: 136124

In lieu of you providing the HTML you're using, I think the main problem with your fadeIn code is that you've already added the element, and it's visible already, so the fadeIn has no effect.

I managed to get this working by switching round the order of execution slightly. Rather than use insertBefore, I used append and chained the fadeIn to the creation of the new tr element:

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

This can be seen demonstrated here: http://jsfiddle.net/HZwvA/

Upvotes: 1

Related Questions