jquery - 如何在jQuery中为标签设置动画？

Question

我想label在 jQuery 中将我的从顶部移动到底部，反之亦然。我正在使用以下代码：

$("#LabelId").animate({ top: "-=30px", width: "100%" }, 2500,"slow");

<label id="LabelId">Label</label>

但它在处理时给了我一个错误。

Answer 1

你得到一个错误是因为2500并且"slow"都是持续时间方法，你必须选择一个，而不是两者。2500 是 2.5 秒，慢是一秒，或者我不知道慢的确切秒数。

要么这样做

$("#LabelId").animate({ top: "-=30px", width: "100%" }, 2500);

或者

$("#LabelId").animate({ top: "-=30px", width: "100%" }, "slow");

Answer 2

您正在通过两个持续时间参数。您还需要给标签一个position或一个显示属性，而不是inline：试试这个：

$("#LabelId").animate({ top: "-=30px", width: "100%" },'slow');

并添加到您的 CSS：

#LabelId {
    position: relative;
}​

请在此处查看工作演示 > http://jsfiddle.net/Z2vqe/

Answer 3

尝试删除顶部的 px

$("#LabelId").animate({ top: '-=30', width: "100%" },'slow');

查看带有方向属性（如上、左）的动画的基本用法

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

Answer 4

AS 和 Always，jQuery 和 CSS 都是基于上下文的，你需要确定你的上下文。

因此，如果要在父控件中制作标签动画，则必须将 css 位置指定为position:relative;. 如果您想让它在文档中设置动画，请指定为position:absolute;. 如果您想让它在窗口中设置动画，请指定为position:static;.

同样，jQuery 将完成剩下的工作。$("#LabelId").animate({ top: "-=30px", width: "100%" }, 2500);