Анимируйте ширину и высоту по клику с помощью jQuery

Question

Попытка анимировать ширину и высоту этих полей при клике.

См. Скрипку:

http://jsfiddle.net/CqDXn/1/

Мне удалось получить ширину для анимации ... не нужно просто предотвращать этот неуклюжий прыжок в конце анимации.

редактирование:

Стоит отметить, что я не могу установить статическую высоту для

.

Answer 1

• Что такое 200? в Эм? ПВ? использовать измерение. '200px'.

• Вы не анимировали высоту и ширину: {width: '200px', height: '200px'}

• Я убрал правило .active css для автоматической высоты. Анимация должна позаботиться об этом.

код:

$(document).delegate('.rewards-process li:not(.active)', 'click', function(e)
    {
        var toActive = $(this);
        $('.rewards-process li.active').addClass('transition');
        $('.rewards-process li.active').animate({
            width:'90px'
            , height: '90px'},1000,function() {
                $('.rewards-process li.active').removeClass('active').removeClass('transition');
            });

$(toActive).animate({
    width:'200px'
    , height: '200px'},300,function(){
        //animation complete
        $(toActive).addClass('active')
    });

});

Я иногда использую этот хак для определения динамической высоты:

function getElementHeight(e, width) {
 $("body").append("<div id='test' style='width:" + width + "'>" + e.html() + "</div>").hide();
    var h = e.outerHeight();
    e.remove();
    return h;
}

Вы должны убедиться, что CSS не испортил это.

По сути, вы создаете элемент с окончательной шириной, вычисляете его высоту, а затем удаляете его. Эта функция вернет число, вам нужно добавить px, и вы можете использовать его в анимации.

Но вам это не нужно. Высота автоматически анимируется для вас, ваши правила CSS просто отключили ее. Например, эта скрипка будет отлично работать .

Answer 2

Эта строка на вашем CSS вызывает скачок.

.rewards-process .active img, .rewards-process .active p {display:block; }

Попробуйте удалить свойство display: block, и оно должно пройти гладко. Найдите способ найти лекарство от этого элемента. Это должно быть легко.

Answer 3

Чтобы оживить высоту, просто добавьте значение высоты под ширину в вызове animate.

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