代码之家  ›  专栏  ›  技术社区  ›  Andrew

jQuery动画,缺少:在属性id之后

  •  2
  • Andrew  · 技术社区  · 15 年前

    我有一个HTML文件,它有一组div,类为“block”。

    我想让它们在页面加载时滑动到位,我正在尝试使用jQuery的动画功能。然而,我对jQuery完全是个傻瓜,而且我遇到了一个教程中提到的bug 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中得到的错误消息是:“missing:after property id”。

    那么,我怎么会误解这一点呢,让一组积木“滑入”到位才是正确的方法呢?(理想情况下,我希望它们能一次一个快速地连续滑入。)

    这里是 a link to the page I'm working on

    1 回复  |  直到 15 年前
        1
  •  3
  •   Nick Craver    15 年前

    margin-top 在JavaScript中不是一个有效的标识符,所以它必须用引号括起来,如下所示:

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

    或者jQuery允许您使用caps来表示 - ,如下所示:

    $(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);
    });