jQuery animate() method, Easy To Learn jQuery animate() method

jQuery animate() method

The jQuery animate() method is used to create custom animations.

Here the params parameter defines the CSS properties to be animated.

The jquery animate() is a speed parameter. It is an optional and specifies the duration of the effect. It can be set as "slow" , "fast" or milliseconds.

The callback parameter is also optional and it is a function which is executed after the animation completes. The following example demonstrates a simple use of the animate() method.

Syntax

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

It moves a <div> element to the right, until it has reached a left property of 200px :

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '300px'});
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 15px; margin:5px 0px;}
#box{
background:#0099da;
height:130px;
width:150px;
position:absolute; 
border-radius:3px;
}
</style>
</head>
 
<body>
 
<button class="btn">Start Animation</button>
<div id="box"></div>
 
</body>
</html>

Output :

jQuery animate() method - Using Multiple Properties

You can use multiple properties to animate at the same time.

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() method - Using Multiple Properties</title>
 
<script src="../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '200px',
            opacity: '0.7',
            height: '130px',
            width: '150px'
        });
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 15px; margin:5px 0px;}
#box{
background:#0099da;
height:80px;
width:100px;
position:absolute; 
border-radius:3px;
}
</style>
</head>
 
<body>
 
<button class="btn">Click Here!</button>
<div id="box"></div>
 
</body>
</html>

Output :

jQuery animate() method - Using Relative Values

It is also possible to define relative values (it is relative to the element's current value) by putting += or -= in front of the value.

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() method Using Relative Values</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '200px',
            height: '+=130px',
            width: '+=150px'
        });
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 12px; margin:5px 0px;}
#box{
background:#0099da;
height:80px;
width:100px;
position:absolute; 
border-radius:3px;
}
</style>
</head>
 
<body>
 
<button class="btn">Click Here!</button>
<div id="box"></div>
 
</body>
</html>

Output :

jQuery animate() method - Using Pre-defined Values

You can even specify a property's animation value as "show", "hide", or "toggle".

In this example, we are using "toggle" value for height, it means it will show/hide the selected element.

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() method -Using Pre-defined Values</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 12px; margin:5px 0px;}
#box{
background:#0099da;
height:125px;
width:150px;
position:absolute; 
border-radius:3px;
}
</style>
</head>
 
<body>
 
<button class="btn">Click Here!</button>
<div id="box"></div>
 
</body>
</html>

Output :

jQuery animate() method - Uses Queue Functionality

The default jQuery animate() comes with queue functionality for animations.

This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() method - Uses Queue Functionality</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '270px', opacity: '0.5'}, "slow");
        div.animate({width: '300px', opacity: '0.9'}, "slow");
        div.animate({height: '80px', opacity: '0.5'}, "slow");
        div.animate({width: '100px', opacity: '0.9'}, "slow");
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 12px; margin:5px 0px;}
#box{
background:#0099da;
height:80px;
width:100px;
position:absolute; 
border-radius:3px;
}
</style>
</head>
 
<body>
 
<button class="btn">Click Here!</button>
<div id="box"></div>
 
</body>
</html>

Output :

Another Example :

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() method - Uses Queue Functionality</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");  
        div.animate({left: '150px'}, "slow");
        div.animate({fontSize: '42px'}, "slow");
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 12px; margin:5px 0px;}
#box{
background:#0099da;
height:60px;
width:100px;
position:absolute; 
border-radius:3px; 
color:#FFF; 
padding:20px 0px 0px 20px;
}
</style>
</head>
 
<body>
 
<button class="btn">Click Here!</button>
<div id="box"><i class="font">FTL</i></div>
 
</body>
</html>

Output :

jQuery Tutorial