Jquery is not working.... help?

1

Jquery is not working in codepen
i have added it via javascript setttings in codepen

Here is the link:

2

It’s working fine - all you’re doing is adding classes, and those classes are being added as expected.

48

1 Like
3

Thank you for replying Dan .
but am not able to see the button bounce.
i dont see how its working.
help if you have time

4

All you’re doing is adding CSS classes, how they behave doesn’t have anything to do with jQuery - there is no logic anywhere that would make your button animated.

$("button").addClass("animated bounce animated shake");
$("body").addClass("animated fadeOut animated hinge");

That code adds those CSS classes, that’s it: jQuery is working perfectly, it’s doing exactly what you’ve told it to do.

I assume you need some CSS library which is not included in your pen.

1 Like
5

Dan am sorry for annoying but am new to this
but when i add the class ,when the page appears shouldn’t it bounce?
like the lesson from freecodecamp?

6

So you are adding a CSS class - it is just an arbitrary name. Like if in your CSS you had something like

.red {
  color: red;
}

And then in your JS you had

$("button").addClass('red');

That would add the class red to your button, and the text would be red.

At the minute you are adding some classes, but there is not CSS that relates to them, so they don’t do anything.

Can you link the lesson, I think you are supposed to include a CSS library that you haven’t included.

7

Thanks a lot
i understood that
but what about jquery ?
in freecodecamp. when the classes were added , it worked when the page got loaded
i thought these animated bounce class and all were already defined

8

Nope, there are no classes defined. JQuery is a JS library, it defines no classes. And there are no predefined classes in HTML. Can you link the lesson, I think it includes a CSS library that you haven’t included here.

9

why was it working here?
check this lesson:
https://www.freecodecamp.org/challenges/use-jquery-to-modify-the-entire-page

10

it was animated.css
thanks Dan for your help

11

:slight_smile: aha, here we go:

https://daneden.github.io/animate.css/

If you go to the CSS tab in the codepen settings, in the “Quick-add” dropdown it’s one of the options there.

Then if you hit “run”, you’ll see the animation.

I would have a look at the different animations on the animate CSS website, and try them out. It’s just a case of adding whatever class you want.

At the minute the animations you’ve added make your button go wobbly then disappear, which is cool but makes it a bit difficult to use!

12

Once again thanks Dan
i would have probably been stuck in this one if you hadn’t explained what was wrong