jQuery .animate() 不工作答案

【问题标题】：jQuery .animate() not workingjQuery .animate() 不工作
【发布时间】：2014-03-22 10:59:42
【问题描述】：

我是 jQuery 新手，一直在通过 Codecademy 学习它。我正在网站上创建一个“codebit”（网站），并且试图在按下向上、向下、向左和向右键时使图像精灵做出反应（移动）。

HTML ：

<!DOCTYPE html>
<html>
    <head>
        <title>Sprite</title>
        <link rel='stylesheet' type='text/css' href='style.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img src="[img]"/>
    </body>
</html>

CSS：

img {
    position: relative;
    left: 0;
    top: 0;
}

Javascript：

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            //LEFT
            case 37:
                $('img').animate({left: "-=10px"}, 500);
                break;
            //RIGHT
            case 39:
                $('img').animate({left: "+=10px"}, 500);
                break;
            //UP
            case 38:
                $('img').animate({top: "-=10px"}, 500);
                break;
            //DOWN
            case 40:
                $('img').animate({top: "+=10px"}, 500);
                break;
        }
    });
});

我在几个网站上检查了语法错误，但似乎找不到任何明显的错误。帮助将不胜感激。

【问题讨论】：

似乎工作正常：jsfiddle.net/e8gwK 只是有一个问题，如果您按住方向键，它会永远移动。
你是认真的吗？错误在哪里？ jsfiddle.net/jogesh_pi/Xn5N5
啊哈，谢谢，我不知道“//ajax.googleapis...”的事情。感谢您的帮助。
如果这是正确的答案，这个问题应该被关闭。 @user3412847 刚刚忘记包含 jQuery。它与 jQuery 动画无关

标签： javascript jquery jquery-animate

【解决方案1】：

您应该将 jQuery 脚本包含在您的脑海中（在您自己的 script.js 之前）。

喜欢

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

【讨论】：

谢谢，当时我还不知道。
如果这是正确的答案，这个问题应该被关闭。 @user3412847 刚刚忘记包含 jQuery。它与 jQuery 动画无关

【解决方案2】：

这是一个快速版本。

http://jsfiddle.net/E45hb/

JS

$(document).keydown(function (key) {
    switch (parseInt(key.which, 10)) {
        case 37:
            $('img').stop(true).animate({
                left: "-=10px"
            }, 'fast');
            break;
        case 38:
            $('img').stop(true).animate({
                top: "-=10px"
            }, 'fast');
            break;
        case 39:
            $('img').stop(true).animate({
                left: "+=10px"
            }, 'fast');
            break;
        case 40:
            $('img').stop(true).animate({
                top: "+=10px"
            }, 'fast');
            break;
    }
});

【讨论】：

【解决方案3】：

看看给定的 JSfiddle，虽然它是用 Javascript 编写的，但希望它有所帮助，但你会有所了解。

JS fiddle Example

JS Fiddle 中的 Javascript 代码

var timer_id; // reference of the timer, needed to stop it
var speed = 50; // pixels/second
var period = 40; // milliseconds
var sprite; // the element that will move
var sprite_speed = 0; // move per period
var sprite_position = 100; // pixels

// called every 40 ms
function animate ()
{
    sprite_position += sprite_speed;
    if (sprite_position < 0) sprite_position = 0;
    if (sprite_position > 200) sprite_position = 200;
    sprite.style.left = sprite_position+'px';
}

// launches a move in one direction (-1 for left, 1 for right)
function move(direction)
{
    if (timer_id) stop();
    sprite_speed = speed * period/1000 * direction;
    timer_id = setInterval (animate, period);
}

// stops animation
function stop()
{
    clearInterval (timer_id);
    timer_id = null;
}

// init (once the page has loaded)
function init()
{
    // get a reference to the HTML element we will move
    sprite = document.getElementById ("sprite"); 
    animate(); // just to initialize sprite position
}

// start doing things once the page has loaded
window.onload =init;

【讨论】：

如果有帮助记得接受它作为答案。谢谢:)
老兄，为了简化您的代码，请使用 Jquery animate.MarioDs 的答案，或者适合这个问题:)
感谢您接受它作为答案，感觉很好，它对您有所帮助:)

【解决方案4】：

您不会相信这个答案，但是经过 30 分钟的调试（从 .fadeOut() 开始不起作用，然后发现 .animate 也不是），我重新启动 Chrome 并开始工作。

这是一个 Chrome 错误。

即使你不相信我，这也是一个快速测试:)

【讨论】：

我遇到的问题与 Chrome 无关...与我忘记包含指向 jQuery 的链接有关。
@gilbert-v 当我把 macbook 放在我旁边并打开完全相同的代码库时，我可以确认这是一个 Chrome 错误，并且没有发生错误。然后我简单地在故障机器上重新启动 Chrome，它神奇地开始按预期工作。
难以置信，但今天我遇到了同样的问题：重新启动 Chrome 并且它工作正常。

【解决方案5】：

确保您使用的是jquery 而不是jquery slim 版本。

【讨论】：