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
Plugin MDGallery
By MattijsFranken Sun 25 Oct 2020 11:35 pm Board English Language
1
18
Mon 26 Oct 2020 6:31 am By mindphp
Does MD Watermark work under Joomla 3.9.20?
By Balazs Thu 16 Jul 2020 4:48 pm Board English Language
6
765
Thu 16 Jul 2020 10:31 pm By Balazs
The program calculates the PMT
By prmindphp Wed 20 May 2020 6:45 pm Board English Language
1
240
Thu 21 May 2020 5:57 pm By prmindphp
Helper for calculating NPER values
By prmindphp Tue 19 May 2020 6:55 pm Board English Language
1
223
Thu 21 May 2020 5:59 pm By prmindphp
Program that will be used for home loan calculations
By prmindphp Mon 18 May 2020 6:49 pm Board English Language
1
248
Thu 21 May 2020 6:02 pm By prmindphp
Tools that will help calculate car tax
By prmindphp Thu 14 May 2020 7:00 pm Board English Language
1
247
Fri 15 May 2020 12:03 am By prmindphp
Helper to create slidershow, Module Product Slide of MooZiiCart
By prmindphp Thu 30 Apr 2020 6:32 pm Board English Language
0
298
Thu 30 Apr 2020 6:32 pm By prmindphp
Helper in searching products by category and keywords with Module Ajax Search of MooZiiCart
By prmindphp Tue 28 Apr 2020 6:17 pm Board English Language
0
267
Tue 28 Apr 2020 6:17 pm By prmindphp
Helper to restore the system to clear data, Plugin System MRestore
By prmindphp Fri 24 Apr 2020 7:05 pm Board English Language
0
248
Fri 24 Apr 2020 7:05 pm By prmindphp
Creating social share buttons, share the website's content to Social Media With Plugin Content Msocial
By prmindphp Wed 22 Apr 2020 7:05 pm Board English Language
0
237
Wed 22 Apr 2020 7:05 pm By prmindphp
Create Content Marketing and Product with Content Product Match of MooZiiCart
By prmindphp Tue 21 Apr 2020 7:19 pm Board English Language
0
277
Tue 21 Apr 2020 7:19 pm By prmindphp
Filtering for find the product with Module Filter product of MooZiiCart
By prmindphp Thu 09 Apr 2020 6:51 pm Board English Language
0
278
Thu 09 Apr 2020 6:51 pm By prmindphp
Template Megadeal of MooZiiCart for creating websites to sell products online
By prmindphp Fri 03 Apr 2020 6:45 pm Board English Language
0
435
Fri 03 Apr 2020 6:45 pm By prmindphp
[MooZiiCart] [Module] Displaying products that customers are interested by Wishlist Module
By prmindphp Fri 27 Mar 2020 5:46 pm Board English Language
0
650
Fri 27 Mar 2020 5:46 pm By prmindphp
Show the Bestsellers Product by Module Bestseller
By prmindphp Wed 25 Mar 2020 6:04 pm Board English Language
0
442
Wed 25 Mar 2020 6:04 pm By prmindphp
Show Products Category by Module Category
By prmindphp Tue 24 Mar 2020 6:07 pm Board English Language
0
544
Tue 24 Mar 2020 6:07 pm By prmindphp
Plugin System MZC Auto Close to enable the open and close odering system
By prmindphp Wed 19 Feb 2020 6:38 pm Board English Language
0
3134
Wed 19 Feb 2020 6:38 pm By prmindphp
MDPartner Component for store client data in CRM system
By prmindphp Sat 25 Jan 2020 3:04 pm Board English Language
0
901
Sat 25 Jan 2020 3:04 pm By prmindphp
i am looking for help
By Anonymous Tue 14 Jan 2020 5:46 pm Board English Language
1
935
Tue 14 Jan 2020 6:03 pm By noppadonsk
Dot Net Training
By Poonaam Fri 10 Jan 2020 2:20 pm Board English Language
0
1182
Fri 10 Jan 2020 2:20 pm By Poonaam