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
Features Review : Components MCharts untuk memproses data dari MJForms menjadi graf
By abdkode Fri 22 Feb 2019 2:02 pm Board Bahasa Language
0
2529
Fri 22 Feb 2019 2:02 pm By abdkode
Features Review : Components MDBridge untuk menyambung data pengguna antara Joomla dan PHPbb Webboard
By abdkode Thu 21 Feb 2019 6:04 pm Board Bahasa Language
0
2705
Thu 21 Feb 2019 6:04 pm By abdkode
Features Review : MDEvents untuk mengurus pelbagai jadual data aktiviti
By abdkode Thu 21 Feb 2019 4:51 pm Board Bahasa Language
0
1724
Thu 21 Feb 2019 4:51 pm By abdkode
Features Review : Component MJUpgrade untuk menaik taraf Joomla 1.5 ke Joomla 2.5, 3.X
By abdkode Thu 21 Feb 2019 4:10 pm Board Bahasa Language
0
5711
Thu 21 Feb 2019 4:10 pm By abdkode
Features Review : Mod Mslideshows untuk memaparkan gambar, video Youtube dari kandungan
By abdkode Thu 21 Feb 2019 3:29 pm Board Bahasa Language
0
1264
Thu 21 Feb 2019 3:29 pm By abdkode
Plugin Editors XTD Multicontent 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:28 pm Board korean Language - 한국어
0
9327
Thu 21 Feb 2019 12:28 pm By wipaporn
Module M Slideshows 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
5042
Thu 21 Feb 2019 12:27 pm By wipaporn
Component M Multisite Master 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
5253
Thu 21 Feb 2019 12:27 pm By wipaporn
Component M Multisite Client 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
8198
Thu 21 Feb 2019 12:27 pm By wipaporn
MDFiles Featured 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:26 pm Board korean Language - 한국어
0
9421
Thu 21 Feb 2019 12:26 pm By wipaporn
Module MDFiles Popular 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:25 pm Board korean Language - 한국어
0
5756
Thu 21 Feb 2019 12:25 pm By wipaporn
Components MDFiles 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 7:13 pm Board korean Language - 한국어
0
2253
Wed 20 Feb 2019 7:13 pm By wipaporn
Features Review : Mod Menu Json untuk menyemak Nama Domain dan memaparkan artikel dari master side
By abdkode Wed 20 Feb 2019 6:53 pm Board Bahasa Language
0
2132
Wed 20 Feb 2019 6:53 pm By abdkode
Module MDFiles Recent 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 6:50 pm Board korean Language - 한국어
0
5411
Wed 20 Feb 2019 6:50 pm By wipaporn
Module MDFiles Categories 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 6:41 pm Board korean Language - 한국어
0
5716
Wed 20 Feb 2019 6:41 pm By wipaporn
Features Review :Mod Lastnews json slider untuk ambil artikel dari Master Site dipaparkan di Web Client secara Slide.
By abdkode Wed 20 Feb 2019 6:11 pm Board Bahasa Language
0
2469
Wed 20 Feb 2019 6:11 pm By abdkode
Component MJForm 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 5:59 pm Board korean Language - 한국어
0
5526
Wed 20 Feb 2019 5:59 pm By wipaporn
Features Review : M Multisite Content untuk mengedarkan data dari Master Site ke Webclient
By abdkode Wed 20 Feb 2019 5:23 pm Board Bahasa Language
0
5295
Wed 20 Feb 2019 5:23 pm By abdkode
使用 Plugin Editors XTD Multicontent 说明手册
By wipaporn Wed 20 Feb 2019 5:18 pm Board Chinese Language - 简体中文
0
16654
Wed 20 Feb 2019 5:18 pm By wipaporn
使用 Module M Slideshows 说明手册
By wipaporn Wed 20 Feb 2019 4:56 pm Board Chinese Language - 简体中文
0
20392
Wed 20 Feb 2019 4:56 pm By wipaporn