jQuery cannot make button bounce

1

Hi. trying to get a hang of the jQuery animated lessons but can’t seem to make mine bounce. Please check my codepen link below.
Side note: I also added the jQuery.ui Library in the hopes that it would help but no luck so far.
Thanks in advance for any help. Thank you fellow campers!!

https://codepen.io/3nduser/full/jYdaMZ/

2

Greetings! I opened up your pen in CodePen, and it didn’t have animate.css loaded. Changed that as well as loaded the regular jQuery library (vice jQuery UI) and it worked just fine.

Hope that helps!

1 Like
3

I noticed your jQuery is missing. jQuery UI is just an addition to jQuery, so you’d still have to add jQuery.

All the addClass function does is add a CSS class to an element. You’d still have to define that CSS class or load a CSS file that has it defined (animate.css seems to be it). Whether that’s what people refer to as jQuery animation is a bit debatable though because it’s really CSS doing the animating and jQuery is the helper. Definitely useful regardless, but in case you’re interested in other types of jQuery animation, I know a bit about them.

With jQuery UI addClass can also be used for animation by adding a duration for the change that the class applies, optionally setting an ‘easing’ setting somewhat similar to CSS animations. This gives you a bit more flexibility on how the changes made by the added class are applied. For example, you can speed up the bounce or make it bounce in reverse.

There’s also the .animate function which is similar to addClass except instead of specifying the class, you add a CSS-like object that’s basically like the CSS you would define in the class you’re adding with addClass.

For example, given the class bounceTo:

.bounceTo{
  top: 0px;
}

you can use the jQuery functions

  $("button").css({top: "-50px"}); //this sets the height from which the button will start bouncing 
  $("button").addClass("bounceTo", 1000, "easeOutBounce"); ///this makes the button move down to 0px from -50px over one second, and bounce toward the end
  $("button").animate({top: "0px"}, 1000, "easeOutBounce"); ///does the same thing
1 Like
4

There’s also the .effect function which gives you built-in effects.

$("button").effect('bounce');

jQuery UI can also animate using the hide and show function.

  $("button").hide("bounce"); ///button will bounce and then disappear
  $("button").show("bounce"); ///button will appear and bounce, but only if it was hidden/had a display of 'none' before.

The .toggle function works similarly but toggles between showing and hiding an element.

1 Like