1

如何在 JQuery 中移动 div 并使用动画效果调整其大小?

即 div 将位于屏幕的中间,它将向左侧移动,在完成移动后将具有 %50 的高度和 %50 的宽度。(例如,它将具有 %75 的大小中途)

编辑:我试过了:

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

然而它消失了?

EDIT2: 这有效:

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

但是它使我的正方形更大,我尝试 =-30% 但不起作用。我应该怎么做才能变小而不是变大?

4

2 回答 2

2

似乎最后一行将高度和宽度 css 属性设置为 30%。您期望它是之前大小的 30%,但实际上它是块的最近大小父级的 30%,这似乎比之前的大小大。

我认为没有一种简单的方法可以将大小调整为先前大小的给定百分比(例如 animate 中的特殊语法等)。我假设您必须编写一个 javascript 函数来计算旧宽度的新宽度。

鉴于您只想调整一个元素的大小,我强烈建议您使用元素 ID 而不是其类。然后下面的行应该做你想要的:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);
于 2011-08-16T14:00:06.367 回答
0

您可以使用 jQuery 的动画功能。您可以查看此链接:

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

在上面的链接中,示例向您展示了您想要的所有内容(例如通过动画更改宽度)。请检查示例。

于 2011-08-16T11:10:54.187 回答