Why my Jquery animate() function is not working?

Question

I am trying to change bootstrap jumbotron by Jquery animate function. But that is not working.I expect after click in the animate button the jumbotron size will be increase half of my screen.

<div class="content">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="display-4">
                <div class="display-4 heading">JQuery Practice</div>
                <p class="lead">
                This is Jquery Practice Session. Jquery is a javascript 
                library to make developers life better.
                Let's make our jQuery learning fun.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-center">
    <div class="p-2">
        <button type="button" class="btn btn-success" id="animate">Animate</button>
    </div>
</div>

And jQuery is:

$(document).ready(function() {
  $("animate").click(function() {
    $("jumbotron").animate({
      height:50vh
    });
  });
});

score 1 · Answer 1 · answered Mar 24 '19 at 16:44

It is that you are using jQuery slim instead of actual jQuery. Also, you are not selecting elements properly as animate is an id and jumbotron is a class. Please check this codepen link of working code:

https://codepen.io/rohitmittal/pen/VRgVEP

Hope it helps you.

score 0 · Answer 2 · edited Mar 25 '19 at 12:27

$(document).ready(function(){
  $("#animate").click(function(){
    $(".jumbotron").animate({
      height: "50vh"
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
   <div class="content">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="display-4">

                <div class="display-4 heading">JQuery Practice</div>

                <p class="lead">
                    This is Jquery Practice Session.Jquery is a javascript library to make developers life better.
                    Let's make our jquery learning fun.

                </p>

            </div>
        </div>
    </div>
</div>
    
    
<div class="d-flex justify-content-center">
    <div class="p-2">
        <button type="button" class="btn btn-success" id="animate">Animate</button>
    </div>
</div>

  </body>
</html>

As I understand, you want to animate the height of the jombotron div. Try this code,

$("#animate").click(function(){
   $(".jumbotron").animate({
      height: "50vh"
   });
});

You are not selecting the elements properly, `animate` is an id and `jumbotron` is a class. For selecting element with id you need to use `$("#animate")` not `$("animate")`, Similarly for selecting element with class property, you need to use `$(".jumbotron")`. — Aquib Iqbal, Mar 24 '19 at 18:24
jQuery.slim.js will not support animate, check this https://stackoverflow.com/a/35424465/10471701 and this https://blog.jquery.com/2016/09/22/jquery-3-1-1-released/ — Aquib Iqbal, Mar 24 '19 at 18:42

Why my Jquery animate() function is not working?

2 Answers2