CSS effects are not working

Asked

Viewed 122 times

1

The code below is functional, the classes are added without problems, but I see that when inspecting the elements, I can notice that the page, already loaded, contains the classes included in their respective elements, but the effects do not occur.

I think it’s because html is loading before or something like that.. someone knows how to solve?

Note: I’m a beginner in

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="jquery-3.2.1.min.js"> </script>
     <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>
<body>


<script> 
    $(document).ready(function() {

         $("button").addClass("animated bounce");
  $(".text-primary").addClass("animated shake");
  $(".well").addClass("animated shake");


  $("#target3").addClass('fadeOut');


    });

    </script>


<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
jquery html css bootstrap

  • The included code is based only on the classes to animate, so it is necessary that the css of the classes be shown as well. The Jquery used only adds css classes, doing nothing else.

  • Please provide the contents of the Styles.css file

  • Então, estou começando a pegar o jquery agora And then he’s as good as the bad tongues?

  • Sorry @Renan I edited the question after you have commented something and now there is no more quote you made.

1 answer

2

Justification

Natively, the jQuery and the Bootstrap by themselves do not have animations that can be performed only by including a class, but there is a CSS called Animate that allows you to perform this type of animation only by including the class in this way that you want.

Example

Follows the example I created in jsFiddle with animations running normally, after I’ve included Animate.

Remarks

To include Animate in your project just include the CDN:

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

This link may be outdated, so I suggest you search for the CDN directly from Animate github page

Browser other questions tagged jquery html css bootstrap

You are not signed in. Login or sign up in order to post.