为什么动画不起作用（CSS / JS / jQuery）？

Question

I am creating a slide-in menu, and what i want to do is when the user clicks on an image, the menu slides in. I have used everything, CSS animations, jQuery animation, and still not working. `

            <div id="nav-slide-unvisible">
                <!-- Image that toggles animation -->
                <img id="image" src="arrow.png">

                <ul>

                    <li>Bla bla</li>
                    <li>Bla bla</li>
                    <li>Bla bla</li>
                    <li>Bla bla</li>
                    <li>Bla bla</li>

                </ul>

            </div>

        </nav>`

I used transform: translateX(-240px) in CSS, applying it to <nav id="slide-nav"> This is the jQuery code:

$("image").click(function() {
            $("slide-nav").animate({
            '-webkit-transform':'translateX(242px)'
            ,'-moz-transform':'translateX(242px)',1000);
                               });

But debugger generates an error "SyntaxError: missing : after property id" Thanks.

Answer 1

The syntax error is a result of the missing curly brace in the object passed to the animate method:

$("#image").click(function() {
     $("#slide-nav").animate({'-webkit-transform':'translateX(242px)',
                             '-moz-transform':'translateX(242px)'},1000);
 });                                   // The one that goes here ^

Answer 2

$("image").click(function() {
            $("slide-nav").animate({
            '-webkit-transform':'translateX(242px)'
            ,'-moz-transform':'translateX(242px)',1000);
                               });

change it to

$("#slide-nav").animate({