javascript - jQuery .animate() not working

I am new to jQuery and have been learning it through Codecademy. I am creating a 'codebit' (website) on the site, and I am trying to make an image sprite react (move) when the up, down, left and right keys are pressed.

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

I have checked on a few sites for syntax errors, and can't seem to find any obvious ones. Help would be most appreciated.

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

I have checked on a few sites for syntax errors, and can't seem to find any obvious ones. Help would be most appreciated.

Share Improve this question asked Mar 22, 2014 at 10:59 gilbert-v 1,3051 gold badge11 silver badges24 bronze badges

Seems to be working: jsfiddle.net/e8gwK There is just a problem where it moves forever if you hold down the directional key. – Mr. Polywhirl Commented Mar 22, 2014 at 11:04
Are you serious? where is the error ? jsfiddle.net/jogesh_pi/Xn5N5 – jogesh_pi Commented Mar 22, 2014 at 11:04
Aha, thank you, I hadn't known about the "//ajax.googleapis..." thing. Thanks for the help. – gilbert-v Commented Mar 24, 2014 at 18:45
If this is the correct answer, this question should be closed. @user3412847 just got mixed up with forgetting to include jQuery. It has nothing to do with jQuery animations – krummens Commented Jan 22, 2017 at 0:32

Add a comment |

5 Answers 5

Sorted by: Reset to default 6

You should include the jQuery-script in your head (before your own script.js).

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

Here's a quick version.

http://jsfiddle.net/E45hb/

$(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;
    }
});

Take a look at given JSfiddle, hope it hepls though it is in Javascript but you will get an idea.

JS fiddle Example

Javascript Code in JS Fiddle

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;

You won't believe this answer, but after 30 minutes of debugging (started with .fadeOut() not working, and then discovered .animate wasn't either) I restarted Chrome and it started working.

It's a Chrome bug.

Even if you don't believe me, it's a quick test :)

Make sure that you are using jquery not the jquery slim version.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery .animate() not working - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)