Uncaught syntax error using jQuery's animate()

Question

I have been trying to create a simple practice page using jQuery's animate() to animate some divs on button presses, but it doesn't work. I have been getting an uncaught syntax error on line 29, $(.red).animate... Why does this happen?

<!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>

score 1 · Answer 1 · answered Sep 07 '13 at 04:45

1

Try this syntax:

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

CSS properties need to be either the DOM equivalent (usually camelcase like marginLeft) or in quotes.

answered Sep 07 '13 at 04:45

probablyup

7,636
1
27
40

score 1 · Answer 2 · edited Apr 14 '14 at 12:57

1

Function animateOne() is missing the ending brace, }. That is the reason you get the syntax error.

Instead of

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

it should be:

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

edited Apr 14 '14 at 12:57

SpYk3HH

22,272
11
70
81

answered Sep 07 '13 at 05:10

Peter Mortensen

30,738
21
105
131

Thanx guys quoting the css and fixing that missing bracket got it working..crazy the uni guide I was working from had no css elements in quotes maybe it's out of date – Heath Ward Sep 07 '13 at 09:15

score 0 · Answer 3 · edited May 23 '17 at 12:25

Your syntax error is because you are trying to create a variable name with dashes, -. Therefore it's not working. In jQuery, CSS names requiring a dash can either be enclosed in quotes, ' | ", or you can camelCase the word.

So for instance, the line

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

should be:

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

OR

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

OR

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

Thus your full JavaScript rewrite would be:
_{I made a couple of other changes you'll be interested in, please see comments}

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

You might also look at this Stack Overflow question for more information on variable names:

What characters are valid for JavaScript variable names?

Uncaught syntax error using jQuery's animate()

3 Answers3

Example