CODEWITHSUNDEEP
javascriptjquery
Austin Hansen
Austin Hansen

Reputation: 374

Functionality Issue using the '.animate()' Function

I am working through the jQuery curriculum on CodeCademy and this particular assignment involves using a switch function in conjunction with multiple instances of the '.animate()' function. The 'img' in question is our favorite Italian plumber but he will only move left. When I run the code I get this error returned " Oops, try again. It looks like your image doesn't move right when you press 'Right'." 

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                $('img').animate({up: "-=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 39:
            $('img').animate({right: "-=10px"}, 'fast');
                break;
            // Down Arrow Pressed
            case 40:
                $('img').animate({down: "-=10px"}, 'fast');
                break;
        }
    });
});

Upvotes: 4

Views: 119

Answers (1)

Brad C
Brad C

Reputation: 2982

$(document).ready(function () {
    $(document).keydown(function (key) {
        switch (parseInt(key.which, 10)) {
            // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
                // Up Arrow Pressed
            case 38:
                $('img').animate({top: "-=10px"}, 'fast');
                break;
                // Right Arrow Pressed
            case 39:
                $('img').animate({left: "+=10px"}, 'fast');
                break;
                // Down Array Pressed
            case 40:
                $('img').animate({top: "+=10px"}, 'fast');
                break;
        }
    });
});

Try using left and top instead or else youll be haunted by the CSS demons. Thanks and this works but don'nt invert up/down! :)

Upvotes: 2

Related Questions