2

我一直在尝试使用 jQuery 的 animate() 创建一个简单的练习页面，以便在按钮按下时为一些 div 设置动画，但它不起作用。我在第 29 行遇到了一个未捕获的语法错误，$(.red).animate......为什么会发生这种情况？

<!DOCTYPE html>
<html>
    <head>
        <title>ANIMATE WITH JQUERY</title>
        <meta charset = "utf8">
        <link rel = "stylesheet" href = "anim.css">
        <script src = "jq/jquery-1.10.2.js"></script>
    </head>
    <body>
        <button id = "but1">animate 1</button>
        <button id = "but2">animate 2</button>
        <div class = "red"></div>
        <div class = "red"></div>
        <div class = "red"></div>
        <div id = "blue"></div>
        <div id = "grey"></div>

        <script>
            $(document).ready(function() {
                $('#but1').click(animateOne);
                $('#but2').click(animateTwo);
            });

            function animateOne() {
                $('.red').animate({margin-left:"200"},{duration:2000});
                $('#blue').animate({margin-top:"30"},{duration:1000});
                $('#grey').animate({margin-bottom:"200"},{duration:1500});
            }

            function animateTwo() {
                $('.red').animate({margin-left:"400"},{duration:2000});
                $('.red').animate({opacity:"0.2"},{duration:3000});
                $('#blue').animate({margin-top:"30"},{duration:1000});
                $('#grey').animate({margin-bottom:"200"},{duration:1500px});
            }
        </script>
    </body>
</html>
4

3 回答 3

1

函数animateOne()缺少结束大括号}. 这就是您收到语法错误的原因。

代替

function animateOne(){
    $('.red').animate({margin-left:"200"},{duration:2000});
    $('#blue').animate({margin-top:"30"},{duration:1000});
    $('#grey').animate({margin-bottom:"200"},{duration:1500});

它应该是：

function animateOne(){
    $('.red').animate({margin-left:"200"},{duration:2000});
    $('#blue').animate({margin-top:"30"},{duration:1000});
    $('#grey').animate({margin-bottom:"200"},{duration:1500});
}
于 2013-09-07T05:10:14.897 回答
1

试试这个语法：

$('.red').animate({ 'margin-left' : 200 }, 2000);

CSS 属性需要是 DOM 等价物（通常像 marginLeft 一样的驼峰式）或引号。

于 2013-09-07T04:45:28.760 回答
0

您的语法错误是因为您尝试使用破折号创建变量名，-. 因此它不起作用。在 jQuery 中，需要破折号的 CSS 名称可以用引号括起来，'| "，或者您可以将单词驼峰化。

例如，这条线

$('.red').animate({margin-left:"200"},{duration:2000});

应该：

$('.red').animate({'margin-left':"200"},{duration:2000});

或者

$('.red').animate({"margin-left":"200"},{duration:2000});

或者

$('.red').animate({marginLeft:"200"},{duration:2000});

因此，您的完整 JavaScript 重写将是：
我做了一些您可能感兴趣的其他更改，请参阅评论

$(document).ready(function() {
    $('#but1').click(animateOne);
    $('#but2').click(animateTwo);
});

function animateOne() {
    $('.red').animate({'margin-left':"200"},{duration:2000});
    $('#blue').animate({'margin-top':"30"},{duration:1000});
    $('#grey').animate({'margin-bottom':"200"},{duration:1500});
}

function animateTwo() {
    //  jQuery Chaining means you don't need to
    //  recall this element to add another event
    $('.red').animate({'margin-left':"400"},{duration:2000})
        .animate({'opacity':"0.2"},{duration:3000});

    $('#blue').animate({'margin-top':"30"},{duration:1000});

    //  Also, you had error here with 1500px,
    //  if you intend to use px as a size value,
    //  it too will need to be enclosed in Quotes
    $('#grey').animate({'margin-bottom':"200"},{duration:1500});
}

例子

您还可以查看此 Stack Overflow 问题以获取有关变量名称的更多信息：

哪些字符对 JavaScript 变量名有效？

于 2014-04-14T13:20:53.037 回答