Example

Question

我一直在尝试使用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>

Answer 1

试试这个语法：

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

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

Answer 2

函数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});
}

Answer 3

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

例如，行

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

应该是：

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

OR

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

OR

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

Example

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

What characters are valid for JavaScript variable names?

使用jQuery的animate（）未捕获语法错误

3 个答案:

Example