How do I add transition effects to table rows with jQuery
<p>The following jQuery code swaps table rows when some buttons are clicked. I would like to know how to add a transition effect so that there's a fade-in or fade-out transition effect when a row is moved (instead of the change happening instantaneously). I'm not sure where or how to apply the transition!</p>

<pre><code>// Move item to top or up/down by one
$(".top,.up,.down").click(function(){

    // This row
    var row = $(this).parents("tr:first");

    // When up is pressed
    if ($(this).is(".up")) { row.insertBefore(row.prev()); }

    // When top is pressed
    else if ($(this).is(".top")) { var firstRow = row.parent().find("tr:first").not(row); row.insertBefore(firstRow); }

    // When down is pressed
    else { row.insertAfter(row.next()); }
</code></pre>
