jQuery 动画，缺少：属性 id 之后

Question

我有一个 HTML 文件，其中有一组带有“block”类的 div。

我希望这些在页面加载时能够滑动到位，并且我正在尝试使用 jQuery 的 animate 函数来实现此目的。然而，我对 jQuery 完全是个菜鸟，而且我在 jQuery 站点< 上的教程中遇到了一个错误。 /a> 没有帮助。

这是我的代码：

$(document).ready(function() {
    $(".block").animate( {margin-top: "1%"}, {duration: 200, queue: true} );
});

.block 样式如下所示：

div.block {
    width: 18%;
    float: left;
    margin: 1%;
    margin-top: -10%;
    min-height: 120px;
}

我在 Firebug 中收到的错误消息是：“missing : after property id”。

那么，我是如何误解这一点的，并且这是让一组块“滑入”放置的正确方法？ （我希望它们能够快速连续地一次滑入一个。）

这是指向我的页面的链接正在处理，以防您需要查看。这是 JS 关闭的情况，因此您可以看到动画后块应该出现的位置。

Answer 1

margin-top 本身在 JavaScript 中并不是有效的标识符，因此需要将其放在引号中，如下所示：

$(document).ready(function() {
    $(".block").animate( {'margin-top': "1%"}, {duration: 200, queue: true} );
});

或者 jQuery 允许您使用大写字母来表示 -，像这样：

$(document).ready(function() {
    $(".block").animate( {marginTop: "1%"}, {duration: 200, queue: true} );
});

在内部，jQuery 只是转换 "margin-top ”返回“marginTop”。作为总体建议，由于默认情况是排队，因此您可以将代码简化为：

$(function() {
    $(".block").animate({'margin-top': "1%"}, 200);
});