Анимируйте ширину и горизонтальные поля, сохраняя размер ящика - PullRequest
0 голосов
/ 15 июня 2011

У меня есть UL со всеми LI, возведенными в квадрат и плавающими влево. Я хочу анимировать их так, чтобы они начинали с 50% их размера, увеличиваясь как по ширине, так и по высоте, но сохраняя свое положение.

Единственный способ думать (без добавления новой разметки) - начинать с полей (по 25% ширины и высоты на каждой) и уменьшать поля при увеличении размеров. Тем не менее, jQuery animate () не поддерживает постоянную сумму: margin-left + width + margin-right, даже если используется линейное облегчение.

Как я могу анимировать DIV с помощью jQuery's animate ()?

Вот мой код .. Исходное состояние:

items.css({
       opacity:0,
       marginTop: 17,
       marginRight: 17,
       marginBottom: 18,
       marginLeft: 19,
       width: 78,
       height: 78
    });

Анимация:

items.animate({
        opacity:1,
        marginTop: 0,
        marginRight: 0,
        marginBottom: 1,
        marginLeft: 2,
        width: 112,
        height: 112
    }, 'slow', 'linear');

1 Ответ

0 голосов
/ 15 июня 2011

Вот пример: http://jsfiddle.net/TabUc/1/

EDIT: Вот исправление для тряски дивов и кнопок http://jsfiddle.net/jYHtr/2/

...