javascript - Applying .animate() to a row added using .after() - Stack Overflow

admin管理员组

文章数量:1389983

So I currently use the following:

$.ajax({
    type: "GET",
    url: "file.php",
    success: function(html) {
        $("#tableRow").after(html);
    }
});

which neatly adds a new row (or rows) to an existing table. file.php returns:

<tr><td>stuff</td></tr>

I can add a single row at a time. I'm trying to animate just the newly added row like:

$("#tableRow").after(html).animate({ backgroundColor: "#bce4b4" }, "fast")

but that highlights the row I'm adding the new row after. I can't get it to apply to just that new row. How can I do that?

UPDATE:

Based on the answers given I put this together: / where I do the following:

$("<tr><td>2 1</td><td>2 2</td></tr>").insertAfter("#tableRow").animate({
    backgroundColor: "#bce4b4"
}, "slow");

(I replaced what file.php will give with text") and that does not seem to work. It creates the row but does not animate. Am I missing something simple?

So I currently use the following:

$.ajax({
    type: "GET",
    url: "file.php",
    success: function(html) {
        $("#tableRow").after(html);
    }
});

which neatly adds a new row (or rows) to an existing table. file.php returns:

<tr><td>stuff</td></tr>

I can add a single row at a time. I'm trying to animate just the newly added row like:

$("#tableRow").after(html).animate({ backgroundColor: "#bce4b4" }, "fast")

but that highlights the row I'm adding the new row after. I can't get it to apply to just that new row. How can I do that?

UPDATE:

Based on the answers given I put this together: http://jsfiddle/jreljac/5ctpc/3/ where I do the following:

$("<tr><td>2 1</td><td>2 2</td></tr>").insertAfter("#tableRow").animate({
    backgroundColor: "#bce4b4"
}, "slow");

(I replaced what file.php will give with text") and that does not seem to work. It creates the row but does not animate. Am I missing something simple?

• javascript
• jquery
• jquery-after

Share Improve this question Follow edited Mar 10, 2017 at 14:26 Mohammad 21.5k1616 gold badges5757 silver badges8585 bronze badges asked Nov 9, 2011 at 21:33 JasonJason 15.4k2323 gold badges8686 silver badges118118 bronze badges 1

• Yep, you forgot to check the box next to 'jQuery UI 1.8.16' ;) – rkw Commented Nov 9, 2011 at 22:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

User insertAfter instead. It will then animate the correct row.

$(html).insertAfter("#tableRow").animate(...

Try using insertAfter() instead

$(html).insertAfter('#tableRow').animate({ backgroundColor: "#bce4b4" }, "fast");

This will do what you want:

$(html).insertAfter('#tableRow').animate({ backgroundColor: "#bce4b4" }, "fast")

Although 'html' is just a string, you can still wrap it in $() to turn it into a jQuery object.

本文标签： javascriptApplying animate() to a row added using after()Stack Overflow