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
使用 Component M Multisite Master 说明手册
By wipaporn Wed 20 Feb 2019 4:30 pm Board Chinese Language - 简体中文
0
19941
Wed 20 Feb 2019 4:30 pm By wipaporn
使用 Component M Multisite Client 说明手册
By wipaporn Wed 20 Feb 2019 4:06 pm Board Chinese Language - 简体中文
0
20787
Wed 20 Feb 2019 4:06 pm By wipaporn
Features Review : M MultiSite Content client Komponen untuk merekodkan Nama Domain Master Site
By abdkode Wed 20 Feb 2019 3:51 pm Board Bahasa Language
0
8049
Wed 20 Feb 2019 3:51 pm By abdkode
使用Module MDFiles Popular 说明手册
By wipaporn Wed 20 Feb 2019 3:35 pm Board Chinese Language - 简体中文
0
24331
Wed 20 Feb 2019 3:35 pm By wipaporn
Features Review : MDFiles Documents membantu menghubungkan artikel ke Component MDFiles
By abdkode Wed 20 Feb 2019 3:33 pm Board Bahasa Language
0
4678
Wed 20 Feb 2019 3:33 pm By abdkode
使用 Module MDFiles Featured 说明手册
By wipaporn Wed 20 Feb 2019 3:04 pm Board Chinese Language - 简体中文
0
25103
Wed 20 Feb 2019 3:04 pm By wipaporn
使用Module MDFiles Categories 说明手册
By wipaporn Wed 20 Feb 2019 2:31 pm Board Chinese Language - 简体中文
0
21871
Wed 20 Feb 2019 2:31 pm By wipaporn
使用 Module MDfiles recent 说明手册
By wipaporn Wed 20 Feb 2019 2:29 pm Board Chinese Language - 简体中文
0
24077
Wed 20 Feb 2019 2:29 pm By wipaporn
使用Component MDFiles说明手册
By wipaporn Wed 20 Feb 2019 12:10 pm Board Chinese Language - 简体中文
0
10773
Wed 20 Feb 2019 12:10 pm By wipaporn
使用 Component MJForm 说明手册
By wipaporn Wed 20 Feb 2019 12:03 pm Board Chinese Language - 简体中文
0
23169
Wed 20 Feb 2019 12:03 pm By wipaporn
Features Review : Plugin Editors XTD Multicontent untuk mengeluarkan artikel dari Master Site ke Web Clien
By abdkode Tue 19 Feb 2019 6:52 pm Board Bahasa Language
0
6495
Tue 19 Feb 2019 6:52 pm By abdkode
Features Review : Mod MDFiles Popular modul menyenaraikan fail popular
By abdkode Tue 19 Feb 2019 5:41 pm Board Bahasa Language
0
5449
Tue 19 Feb 2019 5:41 pm By abdkode
Features Review : Mod MDFiles Featured memaparkan fail-fail yang dipilih dari MDFile untuk dipaparkan pada Joomla
By abdkode Tue 19 Feb 2019 4:39 pm Board Bahasa Language
0
2754
Tue 19 Feb 2019 4:39 pm By abdkode
Features Review : Components Mjform komponen untuk membuat borang laman web
By abdkode Tue 19 Feb 2019 3:23 pm Board Bahasa Language
0
2626
Tue 19 Feb 2019 3:23 pm By abdkode
Mod MDFiles Popular 모듈 소개 MDFile에서 파일을 가져와 표시
By wipaporn Fri 15 Feb 2019 6:06 pm Board korean Language - 한국어
0
6410
Fri 15 Feb 2019 6:06 pm By wipaporn
MDFiles Featured modules를 소개하면 MDFile에서 파일을 가져와 보여준다.
By wipaporn Fri 15 Feb 2019 6:06 pm Board korean Language - 한국어
0
6054
Fri 15 Feb 2019 6:06 pm By wipaporn
마스터 사이트에서 Web Client로 문서를 끌어오기 위한 플러그인인 Editors XTD Multicontent를 소개한다.
By wipaporn Fri 15 Feb 2019 5:48 pm Board korean Language - 한국어
0
1980
Fri 15 Feb 2019 5:48 pm By wipaporn
Joomla 1.5를 Joomla 2.5, 3.X로 업그레이드하기 위한 MJUpgrade 소개
By wipaporn Fri 15 Feb 2019 5:36 pm Board korean Language - 한국어
0
2354
Fri 15 Feb 2019 5:36 pm By wipaporn
MApplication Form Components를 소개한다. 구직 신청서는 웹사이트를 통해 작성된다.
By wipaporn Fri 15 Feb 2019 5:27 pm Board korean Language - 한국어
0
2173
Fri 15 Feb 2019 5:27 pm By wipaporn
Joomla 웹사이트 방문수를 집계하기 위한 "Mod vinaora visitors counter" 소개
By wipaporn Fri 15 Feb 2019 5:09 pm Board korean Language - 한국어
0
2087
Fri 15 Feb 2019 5:09 pm By wipaporn