javascript - jQuery 切换动画播放不流畅？

Question

这是 JSFiddle

看动画，灰色背景 div 突然展开和折叠(没有动画)。

谁能帮帮我。

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

将“速度”参数与 slideToggle() 一起用作:

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