CODEWITHSUNDEEP
jquerybootstrap-4jquery-animate
Osman Rafi
Osman Rafi

Reputation: 1046

Why my Jquery animate() function is not working?

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
    });
  });
});

Upvotes: 0

Views: 2059

Answers (2)

Aquib Iqbal
Aquib Iqbal

Reputation: 375

$(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"
   });
});

Upvotes: 0

Rohit Mittal
Rohit Mittal

Reputation: 2104

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.

Upvotes: 1

Related Questions