jQuery toggle animation not playing smooth?

Question

Here is the JSFiddle

Look at the animation, the gray background div expands and collapses with jerk (without animation).

Can anyone help me out.

HTML:

<div class="referrals-data">
<div class="data-contner">

<div class="table-elmnt">
<div class="referral-band row-elmnt">
    <div class="clearfix cell-elmnt">
        <div class="referral-id have-referrals">
            <span class="referral-pic"></span>
            <span class="referral-name">Click me</span>
        </div>
    </div>
    <div class="cell-elmnt">
    $2000
    </div>
    <div class="cell-elmnt">
    $50
    </div>
</div> <!--referral-band-->

    <div class="my-referral">
        <div class="referrals-data sub-referral">
            <div class="table-elmnt">
                <div class="referral-band row-elmnt">
                    <div class="clearfix cell-elmnt">
                        <div class="referral-id">
                            <span class="referral-pic"></span>
                                <span class="referral-name">User</span>
                        </div>
                    </div>
                    <div class="cell-elmnt">
                        $2000
                    </div>
                    <div class="cell-elmnt">
                        $50
                    </div>
                </div> <!--referral-band-->
            </div> <!--table-elmnt-->
        </div>         
    </div> <!--my-referral-->
</div> <!--table-elmnt-->

jQuery

$('.my-referral').hide();
    $('.have-referrals').click(function () {
        if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
            $(this).addClass('show');
        }else{
            $(this).removeClass('show');
        };
        $(this).parent().parent().parent().children('.my-referral').slideToggle();
    });

CSS

.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; } 
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; } 
.cell-elmnt:first-child { width: 70%; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { cursor: pointer; }

Answer 1

将“ Speed”参数与slideToggle（）配合使用：

 $(this).parent().parent().parent().children('.my-referral').slideToggle("slow");

Answer 2

It would appear as if displaying the divs as table rows and cells is at the heart of the issue. If you remove those properties and instead display as an inline-block it works perfectly:

http://jsfiddle.net/V5zL8/3/

.table-elmnt {
    width: 100%;
}
.row-elmnt {
    width: 100%;
}
.cell-elmnt {
    width: 15%;
    vertical-align: top;
    padding: 12px 0;
    display: inline-block;
}
.cell-elmnt:first-child {
    width: 68%;
    padding: 7px 0;
}