jQuery切换动画播放不流畅吗？

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;
}