jQuery Animation


The jQuery animate() method is used to create custom animations. The animate() method is generally used to animate numeric CSS properties but we can not use the non-numeric properties for that animation.

There are five types of animate methods in jQuery. so you can see the following animate methods.

  • jQuery animate() – Single Property
  • jQuery animate() – Multiple Properties
  • jQuery animate() – Relative Values
  • jQuery animate() – Queued Animations
  • jQuery animate() – Pre-defined Values

jQuery animate() – Single Property

we can also use Single property for an element using the animate() method.

Syntax

$(selector).animate({params},speed,callback);

Parameters

params – This parameter is required and it defines the CSS properties to be animated.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({fontSize:"40px"}, 1000);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

 

jQuery animate() – Multiple Properties

we can also use multiple CSS properties of an element at the same time using the animate() method.

Syntax

$(selector).animate({params},speed,callback);

Parameters

params – This parameter is required and it defines the CSS properties to be animated.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
        $(".box").animate({
            width: "150px",
            height: "150px",
            marginLeft: "100px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #44BCA3;
        margin-top: 30px;
    }
</style>
</head>
<body>
 <div class="box"></div>
  <button>Click here</button>
</body>
</html>

jQuery animate() – Relative Values

We can also use relative values for the animate method. you have to use += or -= before the value. for example, if you want to increase the current height and width then you can use this method.

Syntax

$(selector).animate({params},speed,callback);

Parameters

params – This parameter is required and it defines the CSS properties to be animated.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
        $(".box").animate({
            top: "+=40px",
            left: "+=40px",
            width: "+=40px",
            height: "+=40px"
        });
    });
});
</script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #44BCA3;
        margin-top: 30px;
        position: relative;
    }
</style>
</head>
<body>
 <div class="box"></div>
  <button>Click here</button>
</body>
</html>

jQuery animate() – Queued Animations

We can animate multiple CSS properties one by one individual in an animated queue using jQuery linking of an element.

Syntax

$(selector).animate({params},speed,callback);

Parameters

params – This parameter is required and it defines the CSS properties to be animated.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
        $(".box")
            .animate({width: "150px"})
            .animate({height: "150px"})
            .animate({marginLeft: "100px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #44BCA3;
        margin-top: 30px;
    }
</style>
</head>
<body>
 <div class="box"></div>
  <button>Click here</button>
</body>
</html>

jQuery animate() – Pre-defined Values

We can animate an element using predefined property values such as “hide”, “show” or “toggle”.

Syntax

$(selector).animate({params},speed,callback);

Parameters

params – This parameter is required and it defines the CSS properties to be animated.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #44BCA3;
        margin-top: 30px;
    }
</style>
</head>
<body>
 <div class="box"></div>
  <button>Click here</button>
</body>
</html>