Question

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

我已经在一些网站上检查了语法错误，似乎找不到任何明显的错误。帮助将非常感激。

Answer 1

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

像

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

Answer 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;
    }
});

Answer 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;

Answer 4

你不会相信这个答案，但经过30分钟的调试（开始时.fadeOut（）无效，然后发现.animate也没有）我重新启动了Chrome，它开始工作了。

这是一个Chrome错误。

即使你不相信我，也是一个快速测试：）

Answer 5

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

jQuery .animate（）无效

5 个答案: