【问题标题】：Uncaught syntax error using jQuery's animate()使用 jQuery 的 animate() 未捕获的语法错误
【发布时间】：2013-09-07 04:42:56
【问题描述】：

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

【问题讨论】：

标签： jquery syntax jquery-animate

【解决方案1】：

试试这个语法：

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

CSS 属性必须是 DOM 等价物（通常是像marginLeft 这样的驼峰式）或引号。

【讨论】：

【解决方案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});
}

【讨论】：

感谢大家引用 css 并修复丢失的括号使其正常工作..我正在使用的 uni 指南疯狂地在引号中没有 css 元素可能已经过时了

【解决方案3】：

您的语法错误是因为您尝试使用破折号创建变量名称-。因此它不起作用。在 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 重写将是：
_{我做了一些您可能感兴趣的其他更改，请参阅 cmets}

$(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

您还可以查看这个 StackOverflow 问题，了解有关变量名称的更多信息：

What characters are valid for JavaScript variable names?

【讨论】：