JQuery baby steps

JavaScript
1

Hello there,

A simple query please,

Link below to my Code Pen.

I’m a total newbie here, I’m trying to add some VERY basics effects using JQuery, steps I have done

  1. Added animate.css via the css settings tab
  2. Added bootstrap via the css settings tab
  3. Added my Jquery code to my JS tab

Where am I going wrong?

Thanks so much

2

Animations from animate.css are added by modifying an element’s class, so you should use .addClass('animated shake'). I don’t think there’s a jQuery function called effect.

The page also doesn’t seem to have any <h1> elements. Try adding the animations to <h2> just so you can see.

3

@nightcoder21 I see what you are trying to do. Replace your jquery code with the code below instead and it should solve the issue.

You need to use “.on(“click”, function() {})” instead of “.click(function() {})”

It will also be easier for you to write but also reduce line code by using .toggle() instead of have a separate function to show and a second function to hide-Just my thoughts on this though.

$(document).ready(function(){
$(“button”).on(“click”, function(){
$("#test").toggle();
})
})

PS: FCC Forum pages sometimes uses a different quote symbol(This may be a bug but I am not sure) so you may have to replace the quotes in this script. Will work perfect after.

Hope this helps.

4 
$(document).ready(function(){
  $("button").on("click", function(){
    $("#test").toggle();
  });
});

image

:+1:

1 Like