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

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

改为

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

Answer 2

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

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

为什么动画不起作用 (CSS/JS/jQuery)？

Why is animation not working (CSS/JS/jQuery)?

javascript

css

jquery

animation

jquery-animate