jQuery的.animate()方法无法工作

Question

jQuery的.animate()方法无法工作

4

我是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;
        }
    });
});

我已经检查了一些网站的语法错误，但似乎没有找到任何明显的问题。希望能得到帮助。

- gilbert-v

似乎正常工作：http://jsfiddle.net/e8gwK/ 只有一个问题，如果按住方向键，它会一直移动。 - Mr. Polywhirl

你是认真的吗？错误在哪里？http://jsfiddle.net/jogesh_pi/Xn5N5/ - jogesh_pi

啊哈，谢谢，我之前不知道有 "//ajax.googleapis..." 这个东西。感谢你的帮助。 - gilbert-v

如果这是正确的答案，那么这个问题应该被关闭。@user3412847只是忘记包含jQuery而已，与jQuery动画没有任何关系。 - krummens

5个回答

4

这里是快速版。 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;
    }
});

- MarioD

2

请看这个JSFiddle，虽然它是用Javascript写的，但您可以了解到一些内容。

JS fiddle示例

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;

- Richa

如果这篇回答有帮助到您，请记得将其标记为答案。谢谢 :) - Richa

兄弟，为了简化你的代码，请使用Jquery动画。MarioDs的答案更适合这个问题 :) - Sajitha Rathnayake

感谢您接受它作为答案，并感到高兴它对您有所帮助 :) - Richa

1

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

- Mohamed Ait Si Mhand

1

你不会相信这个答案，但是在调试了30分钟后（开始时.fadeOut()无法工作，然后发现.animate也不行），我重新启动了Chrome浏览器，然后它就可以工作了。

这是一个Chrome浏览器的bug。

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

- sandre89

我遇到的问题与Chrome无关，而是因为我忘记包含jQuery链接。 - gilbert-v

@gilbert-v 当我旁边放着MacBook打开完全相同的代码库时，我确认这是Chrome的一个bug。然后我只是在有问题的机器上重新启动了Chrome，奇迹般地它就开始按照预期工作了。 - sandre89

难以置信，但今天我遇到了同样的问题：重新启动Chrome后它就正常工作了。 - LasaleFamine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter van der Wal · Accepted Answer

在 head 标签中引入 jQuery 脚本（在自己的 script.js 前面）。

像这样：

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