CODEWITHSUNDEEP
jquerysyntaxjquery-animate
Heath Ward
Heath Ward

Reputation: 19

Uncaught syntax error using jQuery's animate()

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>

Upvotes: 2

Views: 214

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22570

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?

Upvotes: 0

Peter Mortensen
Peter Mortensen

Reputation: 31593

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

Upvotes: 1

probablyup
probablyup

Reputation: 8134

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.

Upvotes: 1

Related Questions