Can't understand the "jumps" in jQuery animation

Question

In this fiddle http://jsfiddle.net/Mrbaseball34/btwa7/, I can not understand why the "Close" animation jumps. The exact same code is used to toggle it open.

function showInfo() {
    var data_row = $(this).parent().parent();                
    var tr = data_row.next("tr");
    var eventcode = "";
    var $color = '#000';
    $(this).text('Details');
    var eventcode = data_row.attr('rel');
    if(!tr.is(':visible')) {
        $(this).text('Close');
        var d = "<p>Jelly beans brownie wafer pudding topping. Jelly-o dessert lemon drops jelly beans dragée. Cake macaroon caramels pudding brownie sweet. Jelly gummi bears sweet donut tootsie roll. Soufflé dessert applicake fruitcake tart sugar plum. Jujubes candy fruitcake. Jelly beans marzipan tart macaroon icing icing.</p><p>Candy sugar plum topping icing liquorice. Chupa chups donut jelly pastry halvah. Cake biscuit brownie jelly beans icing biscuit topping. Macaroon bonbon chocolate bar cotton candy soufflé. Sweet roll lemon drops dessert gingerbread dessert fruitcake sweet roll carrot cake. Carrot cake sweet muffin jelly.</p><p>Chocolate bar croissant gingerbread. Jelly-o chocolate cake liquorice lemon drops. Cotton candy croissant sweet roll gummi bears applicake soufflé. Liquorice unerdwear.com brownie gummi bears. Dragée lemon drops lollipop sweet roll donut lollipop danish cupcake. Sweet bear claw carrot cake. Lollipop applicake chocolate chocolate bar ice cream. Icing biscuit gummies chocolate cake cookie cheesecake. Cupcake sugar plum brownie marzipan.</p><p>Liquorice cheesecake biscuit bonbon apple pie tart dragée liquorice tart. Dragée dessert candy canes bonbon cheesecake bear claw gingerbread unerdwear.com. Jelly-o chocolate cake dessert chupa chups cookie donut wafer jelly beans. Biscuit tootsie roll cookie gummi bears gingerbread. Liquorice brownie chupa chups dragée. Marshmallow dragée bear claw croissant gummi bears topping apple pie tootsie roll. Gummi bears macaroon jelly powder biscuit cake macaroon cookie.</p>";
        // The ajax call goes here to return the details        
        $("#info_"+eventcode).html(d);
        $color = '#7D0140';
    }
    $("tr[rel='"+eventcode+"'] .showinfo").css('color', $color);
    $('html, body').animate({
        duration: 1500,
        scrollTop: data_row.offset().top
    });
    tr.toggle("slow");                
}

Can anyone see what I'm missing or perhaps point out a different way to do it?

Answer 1

That's the href="#" taking effect before your code is run. To stop it, use event.preventDefault():

function showInfo(e) {
    e.preventDefault();
    var data_row = $(this).parent().parent();                
    // etc.

http://jsfiddle.net/btwa7/6/