11.Filling Out The Cases


#1

Here in the exercise, we animated a picture to move right,left,up,down. However, when i press right consecutively the image gets stuck and doesn't move. Why is it so? Does anyone know?


#2

what's your code? it's easier to see if you're doing something wrong if you post it; or if it's maybe a bug in the exercise...


#3

Yep check the code



< !DOCTYPE html>

< html>
< head>
< title>Super Mario!
< link rel='stylesheet' type='text/css' href='stylesheet.css'/>

< /head>
< body>
< img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
< /body>

The JQuery code-

$(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:
			// Put our code here
			$('img').animate({top:"-10px"},'fast');
			break;
		// Right Arrow Pressed
		case 39:
			// Put our code here
			$('img').animate({left:"10px"},'fast');
			break;
		// Down Arrow Pressed
		case 40:
			// Put our code here
			$('img').animate({top:"10px"},'fast');
			break;
	}
});

});


#4

well first of all, in your HTML code, you seem to be missing the script tag:
<script type='text/javascript' src='script.js'></script>. also the closing tag for title, but don't think that's effecting your code.

also, check your animate event for every case. you're missing the = between the -/+ and 10 (has to be -=10px not -10px.

everything else seems to be right. if your code passes, but the picture still gets stuck or jumps a bit, leave it. my passing code for this exercise sometimes works, and sometimes doesn't. it could just be a slow browser or a bug.


#5

Yep the "+=" was missing. Thanks :grinning:


#7

Does anyone know why this is giving me an error?
$(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:
// Put our code here
$('img').animate({up: "-=10px"}, 'fast');
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('img').animate({right: "+=10px"}, 'fast');
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('img').animate({down: "+=10px"}, 'fast');
break;
}
});
});

I know the code is right, but it keeps on telling me
Oops, try again. Please follow the instructions on the Full Preview page to test your code.


#8

could u help me with code academy 20 plz


#9

@12rmeadenbrannel_com Please create a new topic with your code, a link to the exercise you're on, and the error message you're getting. Someone will help you over there.
Thanks.


#10

sorry for the late reply

actually when u want to move ur image to the right, left, up, bottom the keys are right:-=10px, right:+=10px, bottom:+=10px, bottomL-=10px respectively.

For more info refer this link


#11

@tom7895 There's no such thing as bottomL, but other than that you're correct :)