Animation is unresponsive


#1

Hi All, I was hoping that someone could explain why my code is not causing the animation to move in the preview screen. My code is being accepted as correct by Codecademy, but is not animating the green planet. I'm on the .bounce() lesson.

 $(document).ready(function(){
    $('div').click(function(){
        $('div').effect('bounce', {times:3}, 500);
    });
});

Any help would be greatly appreciated.


#2

Is it doing anything at all?


#3

can we see your html code?

so nothing is happening when you click the green planet? did you click it? I can't deduce this from your answer


#4

After $(document).ready(function(){ , can you add $("div").css("border", "3px solid red"); and tell us if the div turns red


#5

Hi javascriptjo, it's not doing anything. The code is being accepted as correct and is in line with the hints on that exercise too, but there is no animation.


#6

Would you mind putting

after

and telling me if it makes red boxes? Thank you


#7

Hi stetim94, I did click the green planet after my code was accepted as correct and before the code was accepted as correct in a second attempt. The html code, I haven't changed. It is the same as the one that is given in the exercise. I have copied it below for you to look at.

<!DOCTYPE html>
<html>
    <head>
        <title>Krypton Redux</title>
		<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	</head>
	<body>
		<div></div>
	</body>


#8

Just put the line in the code as below,
$(document).ready(function(){
$("div").css("border", "3px solid red");
$('div').click(function(){
$('div').effect('bounce', {times:3}, 500);
});
});

});
It had no effect.


#9

$(document).ready(function(){
$("div").css("border", "3px solid red");
$('div').click(function(){
$('div').effect('bounce', {times:3}, 500);
});
});

}); // this one is one to many

your last }); is one to many, one tiny mistake in JS and it doesn't work


#10

Hi stetim94, I have just deleted the last set of brackets, but again to no effect.


#11

In the head of your HTML, could you put

and then run it?


#12

No effect again, sorry.



Krypton Redux









#13

Its giving me a syntax error in the bottom of the preview screen.


#14

In your HTML, where you link to script.js, could you move that under the script for jquery ui?

It should look like

It's probably a loading order issue. You loaded the script before the jQuery library.


#15

Still no effect except that it gives an error of $ undefined.


#16

Alright,

This should work. Paste that into the head over the corresponding lines.


#17

Sorry, the code is accepted as correct, but there is no animation when I click on it. It's still giving me a syntax error.


#18

Does it say what the syntax error is?


#19

No, just states syntax error.


#20

Are there any red boxes?

is one of the most common ways of debugging jQuery. It helps to check if the library has loaded and is working.