Как я могу переместить div и изменить его размер с помощью анимации в JQuery?

Question

Как я могу как переместить div, так и изменить его размер с помощью эффекта анимации в JQuery?

т.е. div будет посередине экрана и перейдет на левую сторону и будет иметь% 50 его высоты и% 50 его ширины после завершения перемещения (например,%75 его размера в середине пути)

РЕДАКТИРОВАТЬ: Я пробовал это:

$(".block").animate({"left": "-=100px", "height": "-=30%", "width":"-=30%" }, 1000);

Однако это исчезает?

EDIT2: Это работает:

$(".block").animate({"left": "-=100px", "height": "30%", "width":"30%" }, 1000);

Однако это делает мой квадрат больше, я стараюсь = -30%, но не работает.Что мне делать, чтобы становиться меньше, а не становиться больше?

Answer 1

Похоже, что последняя строка устанавливает свойства css высоты и ширины на 30%.Вы ожидаете, что он будет 30% от предыдущих размеров, но на самом деле это 30% от ближайшего родительского размера блока, который кажется больше, чем предыдущий размер.

Я не думаю, что естьпростой способ изменить размер до заданного процента от предыдущего размера (например, специальный синтаксис в animate или около того).Я предполагаю, что вы должны кодировать функцию javascript, которая вычисляет новую ширину из старой.

Учитывая, что вы хотите изменить размер только одного элемента, я настоятельно рекомендую вам использовать идентификатор элемента вместо его класса.Тогда следующая строка должна делать то, что вы хотите:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);

Answer 2

Вы можете использовать функцию анимации jQuery. Вы можете проверить эту ссылку:

  http://api.jquery.com/animate/

В приведенной выше ссылке примеры показывают все, что вы хотите (например, изменить ширину с помощью анимации). Пожалуйста, проверьте пример.