User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive
 

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

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the animation completes.

 

jQuery Animations - The animate() Method

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

Syntax:

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 <body>
<button>Start Animation</button><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

 

jQuery animate() - Manipulate Multiple Properties

Notice that multiple properties can be animated at the same time:

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head> 
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

 

jQuery animate() - Using Relative Values

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 <body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

 

jQuery animate() - Using Pre-defined Values

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 <body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

 

jQuery animate() - Uses Queue Functionality

By default, jQuery 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.

So, if you want to perform different animations after each other, we take advantage of the queue functionality:

Example 1:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

 

Example 2:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Recent Topics
Subject
Post Reply
Open
Recent
How To Add New Facebook Friends using Facebook Phone Number?
By Anonymous Tue 07 Jan 2020 4:20 pm Board English Language
0
758
Tue 07 Jan 2020 4:20 pm By Anonymous
DBA Training Institute
By Shrutiii Wed 01 Jan 2020 3:06 pm Board English Language
0
793
Wed 01 Jan 2020 3:06 pm By Shrutiii
Tools for calculating the withholding tax easily reduce large tax
By prmindphp Wed 25 Dec 2019 6:56 pm Board English Language
0
793
Wed 25 Dec 2019 6:56 pm By prmindphp
Helper to calculate interest rates for investors
By prmindphp Tue 24 Dec 2019 6:52 pm Board English Language
0
862
Tue 24 Dec 2019 6:52 pm By prmindphp
Plan your savings easily with FV (Future Value) Calculator
By prmindphp Mon 23 Dec 2019 7:28 pm Board English Language
0
747
Mon 23 Dec 2019 7:28 pm By prmindphp
Payment Calculator, Installment calculation to make decisions
By prmindphp Fri 20 Dec 2019 6:00 pm Board English Language
0
797
Fri 20 Dec 2019 6:00 pm By prmindphp
Program Calculate Home Loan, Tools that will help you calculate home loans easily and quickly
By prmindphp Thu 19 Dec 2019 6:59 pm Board English Language
0
866
Thu 19 Dec 2019 6:59 pm By prmindphp
The website loads slowly ? The image size is not proportional, MImageoptimize Plugin of Joomla can help
By prmindphp Tue 17 Dec 2019 7:05 pm Board English Language
0
751
Tue 17 Dec 2019 7:05 pm By prmindphp
Calculation program Number of Periods (NPER)
By prmindphp Mon 16 Dec 2019 7:21 pm Board English Language
0
849
Mon 16 Dec 2019 7:21 pm By prmindphp
Calculation program after including VAT
By prmindphp Fri 13 Dec 2019 5:32 pm Board English Language
0
1054
Fri 13 Dec 2019 5:32 pm By prmindphp
Plugin Content MChangelog ,helps add content that has changed, update, and fix the problem
By prmindphp Thu 12 Dec 2019 6:46 pm Board English Language
0
876
Thu 12 Dec 2019 6:46 pm By prmindphp
Pace Calculator
By prmindphp Wed 11 Dec 2019 6:53 pm Board English Language
0
813
Wed 11 Dec 2019 6:53 pm By prmindphp
Introducing to MooZiiCart's Coupons feature, create coupons on website sell products online it is certain to boost sales
By prmindphp Mon 09 Dec 2019 11:06 am Board English Language
0
770
Mon 09 Dec 2019 11:06 am By prmindphp
Introducing to MooZii Opencart - Template MooZiicart create a beautiful website by yourself
By prmindphp Fri 06 Dec 2019 10:47 am Board English Language
0
754
Fri 06 Dec 2019 10:47 am By prmindphp
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
By mindphp Wed 04 Dec 2019 8:45 pm Board English Language
0
671
Wed 04 Dec 2019 8:45 pm By mindphp
Module "Login" of MooZiicart easy to use, just install
By prmindphp Tue 03 Dec 2019 1:32 pm Board English Language
0
172
Tue 03 Dec 2019 1:32 pm By prmindphp
Module "MooZiiCart Search" of MooZiicart for search keywords of what we want
By prmindphp Mon 02 Dec 2019 11:31 am Board English Language
0
187
Mon 02 Dec 2019 11:31 am By prmindphp
Features Component MooZiiCart in Joomla for create website to sell products online
By prmindphp Sat 30 Nov 2019 7:00 pm Board English Language
2
2173
Wed 08 Apr 2020 6:51 pm By prmindphp
Business Analyst Training
By NehaaB Fri 29 Nov 2019 5:27 pm Board English Language
0
103
Fri 29 Nov 2019 5:27 pm By NehaaB
Program convert area
By prmindphp Wed 27 Nov 2019 11:26 am Board English Language
0
101
Wed 27 Nov 2019 11:26 am By prmindphp