javascript - 为什么动画不起作用 (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>`

我用了transform: translateX(-240px)在 CSS 中，将其应用于 <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 ^