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

Question

我正在创建一个滑入式菜单，我想要做的是当用户单击图像时，菜单会滑入。我已经使用了所有东西，CSS 动画，jQuery 动画，但仍然无法正常工作。 `

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

我在 CSS 中使用了transform: translateX(-240px)，将它应用到<nav id="slide-nav"> 这是 jQuery 代码：

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

但调试器会生成错误“SyntaxError: missing : after property id” 谢谢。

Answer 1

语法错误是由于传递给animate方法的对象中缺少大括号：

$("#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);
                               });

改成

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