jquery remove first row in table - asp.net-mvc-3

Question

I need to have a nice transition where I remove the first row and append to a table new item.
$.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
$('#recentPosts tr:first').fadeOut(2000);
$('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
});
this works the first time i execute getJson only. Please help.
thanks

Answer 1

I've tried to separate each item of functionality you want onto a separate line. If this isn't what you are after, then hopefully it shouldn't be to hard to adjust the below code to suit your needs.
$.getJSON(
'/Home/GetRecentPosts/',
{ count:1 },
removeFirstRowAndAppendNewItem(data)
);
function removeFirstRowAndAppendNewItem(data)
{
console.log("in callback"); // to confirm we have reached here
$('#recentPosts tr:first').fadeOut(2000, function() {
$('#recentPosts tr:first').remove();
newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
$('#recentPosts').append(newRow)
newRow.fadeIn(2000));
});
}
Basically:
Fade out the first row
Remove the first row from the DOM
Create a new element, with styling that hides it
Append the new element to the table
Fade in the new element
(Note: it's possible to combine these steps together)

Answer 2

Try this.
$('#recentPosts tr:visible:first').fadeOut(2000);
Because
$('#recentPosts tr:first').fadeOut(2000);
would have hidden the first element at the first JSON call. Now you are trying again to fadeOut the invisible first element. So you could use a :visible filter to achieve the expected result.
Alternatively, if you wanna remove the element from DOM, try this
$('#recentPosts tr:first').fadeOut(2000, function(){
$(this).remove();
});

Answer 3

Try this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});