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 : Mod MDFiles Categories bantu memaparkan Kategori MDFiles
By abdkode Thu 14 Feb 2019 6:13 pm Board Bahasa Language
0
7539
Thu 14 Feb 2019 6:13 pm By abdkode
Introducing Mod MDFiles Featured MDFiles popular modules bring files from MDFile to show.
By wipaporn Wed 13 Feb 2019 6:51 pm Board English Language
0
16589
Wed 13 Feb 2019 6:51 pm By wipaporn
Introducing MDFiles Featured modules bring files from MDFile to show
By wipaporn Wed 13 Feb 2019 6:34 pm Board English Language
0
2867
Wed 13 Feb 2019 6:34 pm By wipaporn
Introducing Editors XTD Multicontent, a plugin for pulling articles from Master Site into Web Clien.
By wipaporn Wed 13 Feb 2019 6:05 pm Board English Language
0
6319
Wed 13 Feb 2019 6:05 pm By wipaporn
Introducing MJUpgrade for upgrading Joomla 1.5 to Joomla 2.5, 3.X
By wipaporn Wed 13 Feb 2019 6:03 pm Board English Language
3
1810
Mon 13 Apr 2020 7:01 pm By prmindphp
Introducing the Mod vinaora visitors counter for counting website visits in joomla
By wipaporn Wed 13 Feb 2019 6:01 pm Board English Language
0
1626
Wed 13 Feb 2019 6:01 pm By wipaporn
Introducing MVDO plugin for uploading Youtube videos and Clipmass
By wipaporn Wed 13 Feb 2019 5:58 pm Board English Language
0
1463
Wed 13 Feb 2019 5:58 pm By wipaporn
Introducing MD Gallery Components for creating photo galleries on Joomla 3.x website
By wipaporn Wed 13 Feb 2019 5:54 pm Board English Language
13
9180
Tue 31 Mar 2020 6:37 pm By prmindphp
Plugin MD Watermark 소개, 자동 워터마킹용 플러그
By wipaporn Wed 13 Feb 2019 3:53 pm Board korean Language - 한국어
0
2644
Wed 13 Feb 2019 3:53 pm By wipaporn
PayToRead 소개. 플러그인은 일부 텍스트만 보여준다.
By wipaporn Wed 13 Feb 2019 3:51 pm Board korean Language - 한국어
0
1987
Wed 13 Feb 2019 3:51 pm By wipaporn
Facebook에 웹 사이트 회원 등록을 돕기 위한 Component MFacebook 소개
By wipaporn Wed 13 Feb 2019 3:48 pm Board korean Language - 한국어
0
1362
Wed 13 Feb 2019 3:48 pm By wipaporn
"Module Mrelated Article Specific Category" (저장소 검색 이력)을 소개한다
By wipaporn Wed 13 Feb 2019 3:46 pm Board korean Language - 한국어
1
3958
Thu 27 Feb 2020 10:20 pm By mindphp
MDFiles Categories Module을 소개한다.
By wipaporn Wed 13 Feb 2019 3:44 pm Board korean Language - 한국어
0
774
Wed 13 Feb 2019 3:44 pm By wipaporn
MDFile의 파일을 보여주는 mod mdfile recent 모듈 소개
By wipaporn Wed 13 Feb 2019 3:41 pm Board korean Language - 한국어
0
967
Wed 13 Feb 2019 3:41 pm By wipaporn
Joomla용 MDFile Components를 소개하고, 웹사이트에서 문서 파일을 다운로드하는 것을 돕는다.
By wipaporn Wed 13 Feb 2019 3:37 pm Board korean Language - 한국어
0
336
Wed 13 Feb 2019 3:37 pm By wipaporn
介绍joomla的components mdfile,帮助在网站上下载文档文件。
By wipaporn Wed 13 Feb 2019 3:32 pm Board Chinese Language - 简体中文
0
10856
Wed 13 Feb 2019 3:32 pm By wipaporn
介绍mod mdfile recent模块以显示mdfile中的文件
By wipaporn Wed 13 Feb 2019 3:29 pm Board Chinese Language - 简体中文
0
16546
Wed 13 Feb 2019 3:29 pm By wipaporn
介绍mod mdfiles categories模块从mdfile中引入类别。
By wipaporn Wed 13 Feb 2019 3:27 pm Board Chinese Language - 简体中文
0
22659
Wed 13 Feb 2019 3:27 pm By wipaporn
介绍Module Mrelated Article Specific Category。存储浏览历史记录。
By wipaporn Wed 13 Feb 2019 3:23 pm Board Chinese Language - 简体中文
0
871
Wed 13 Feb 2019 3:23 pm By wipaporn
介绍Component mFaceBook以帮助在Facebook上注册网站成员资
By wipaporn Wed 13 Feb 2019 3:20 pm Board Chinese Language - 简体中文
0
310
Wed 13 Feb 2019 3:20 pm By wipaporn