javascript - jQuery 动画，缺少 : after property id

Question

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

我希望这些在页面加载时滑入到位，我正尝试为此使用 jQuery 的动画功能。但是，我对 jQuery 完全是个菜鸟，而且我在 the jQuery site 的教程中遇到了一个错误。没有帮助。

这是我的代码:

$(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 中收到的错误消息是:“缺少:在属性 ID 之后”。

那么，我怎么会误解这一点，这才是让一组 block “滑入”放置的正确方法？ (理想情况下，我希望它们快速连续地一次滑入一个。)

这是 a link to the page I'm working on如果您需要查看它。这是在 JS 关闭的情况下，因此您可以看到 block 在动画后应该出现的位置。

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 just converts "margin-top" back to "marginTop" .作为总体建议，由于默认是排队，您可以将代码简化为:

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