JQuery переключение анимации не играет гладко?

Question

JQuery переключение анимации не играет гладко?

0

Посмотрите на анимацию, серый фон 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; }

ravk 17 апр. 2014, в 07:07

Источник

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

DOTNET Team · Answer 1 · 2014-04-17T05-13-00.000Z

Используйте параметр "Скорость" с помощью функции slideToggle() как:

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

Спасибо за ответ. параметр 'fast' делает расширение анимации плавным (а также быстрее, чем обычно), однако при свертывании это не помогает. Кстати, я заметил, атрибут css display: table вызывает этот рывок в анимации, но я не могу изменить это на display: block из-за требования структуры. Можно ли изменить свойство display до анимации, чтобы block , а затем после анимации вернуться к table .

Chris Spittles · Answer 2 · 2014-04-17T03-39-00.000Z

Казалось бы, что отображение divs как строк таблицы и ячеек в основе проблемы. Если вы удалите эти свойства и вместо этого отобразите их как встроенный блок, он отлично работает:

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

Да ты прав. Я тоже заметил это только сейчас. Однако я не мог изменить это на block или inline-block , так как мне нужны table , row и cell для хранения данных и их структуры, особенно в адаптивном представлении. Так как мне нужны столбцы значений (последние два), данные должны быть выровнены для всех строк, но использование block или inline-block мешает им.