All geek questions in one place

JQuery.animate () not working

I am new to jQuery and studied it through Codecademy. I am creating a “code” (site) on a site, and I am trying to make an image sprite reaction (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 checked several sites for syntax errors and cannot find any obvious ones. Help would be greatly appreciated.

+4
source share
4 answers

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

how

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

Here is the quick version.

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;
    }
});
+4
source

JSfiddle, , , Javascript, .

JS

Javascript 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;
+2

You will not believe this answer, but after 30 minutes of debugging (started with .fadeOut () does not work, and then .animate was not found either). I restarted Chrome and started working.

This is a Chrome bug.

Even if you do not believe me, this is a quick test :)

0
source

Source: https://habr.com/ru/post/1532966/

More articles:


All Articles