Help with jQuery in CodePen

Hello,

I am trying to create a button that acts like it is vibrating when clicked. I would like to have this action last for about one second. I think this could only be done through the shake animation in jQuery (but if there is another function please let me know :slight_smile: ).

At the moment I am having trouble just getting the button to shake. I think the code works because I pasted it into one of the lessons and it worked, but when I put it back into CodePen it does not have the same result. Could someone please where I am going wrong?

Thank you in advance,

The Link:
Test Button

Hello~!

You’re adding the class “animated shake” to the button, but you have not written any CSS that applies to those classes.

Looking at the docs, there appears to be a stylesheet you can import for this.

Why would there be any CSS for the effect? I don’t remember seeing that mentioned in the lessons.

Also, what docs are you talking about?

I was taking a look at the jQuery documentation. This particular page is for an effect method, which CodePen doesn’t seem to like.

But the key part I saw was the <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">, and the two script tags:

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Let me dig into the challenge as well and see if something was going on behind the scenes to make this work. :slight_smile:

Ah yes, the challenge imports another CDN behind the scenes:

Here’s a copyable link: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css

Thank you for checking that out :slight_smile:

I put it in the background and it worked the way the lesson did :smile:.

How would I implement the other code that you have found?

I ask because I put it everywhere I could think of and it didn’t work

I’m not sure how you’d go about adding them to CodePen. I’d think the scripts could be added just like the CDN links (under the settings), but replace the // with https://

The stylesheet could just be linked in your HTML editor, maybe?

CodePen didn’t like me adding http: to the beginning of the code so I left it as is.

I put them in different areas, css, js (separately, not in both places at once), and as a link in html, and none of them worked. Maybe I have to create the @keyframes myself ??