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)