About the Challenges #100-106

1

Hi All,
This is my first post, I am so far doing exercises challeges from 100 (which is about jQuerty)

$(document).ready(function() { $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); $("#target3").addClass("animated fadeOut"); $("button").removeClass("btn-default"); }); My question is how are the animated, bounce, shake and fadeOut class works? I know in the exercises said they include the Animated.css class and jQuery library in the behind scenes. So does it means without they include these two files the classes animated, bounce and shake are meaningless, right? Thanks, and happy coding.
2

That is correct. If you were just to add class animated shake to an element, it would normally not do anything. jQuery adds the class to the html element or removes it, jQuery does not do the animation itself. Animate.css adds css classes that you can apply to elements to animate them. You do not need jQuery to animate elements. You could manually add the class with HTML. For example, let’s look at the Animate.css source code:

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

Basically it defines a class called .fadeOut that has a CSS keyframes animation. Every time you add this class to an element, via HTML or jQuery, it will do the fadeOut animation (opacity 1 to opacity 0) defined in keyframes.

1 Like
3

Yes, if you don’t include the animate.css file in your web page, then those won’t work. They define what those mean for the browser. If you don’t include JQuery, then browser won’t know what those $ mean.

But they are easy to include in your web page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

It’s a little confusing when you’re working through the challenges and the builds (in codepen) because you don’t really see how it all fits together and it takes care of some of these things for you. When you try to build your first page, there will be a few things you need to figure out, but you’ll pick them up quickly. Really, it’s the easiest part of building the page.

1 Like
4

Thanks so much for your help.
I understand much better after your explanation.

5

Thanks so much !
I hope I will be able to build my first page soon!