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
Program exchange rate - Information form Bank of Thailand API
By prmindphp Tue 26 Nov 2019 2:34 pm Board English Language
0
106
Tue 26 Nov 2019 2:34 pm By prmindphp
Tracking Thailand Post Program
By prmindphp Mon 25 Nov 2019 5:47 pm Board English Language
0
138
Mon 25 Nov 2019 5:47 pm By prmindphp
Square Root Calculate Program
By prmindphp Fri 22 Nov 2019 11:30 am Board English Language
0
168
Fri 22 Nov 2019 11:30 am By prmindphp
The program calculates the mean, the variable, the standard deviation
By prmindphp Fri 22 Nov 2019 11:12 am Board English Language
0
138
Fri 22 Nov 2019 11:12 am By prmindphp
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
By numtan5839 Tue 19 Nov 2019 6:06 pm Board English Language
0
139
Tue 19 Nov 2019 6:06 pm By numtan5839
The most popular currency pairs in the Forex for new traders
By numtan5839 Mon 18 Nov 2019 5:32 pm Board English Language
0
135
Mon 18 Nov 2019 5:32 pm By numtan5839
BIG DATA and Hadoop
By Inglejyoti Mon 18 Nov 2019 4:03 pm Board English Language
0
221
Mon 18 Nov 2019 4:03 pm By Inglejyoti
The most popular currency in the Forex
By numtan5839 Mon 18 Nov 2019 3:24 pm Board English Language
0
123
Mon 18 Nov 2019 3:24 pm By numtan5839
How to use the SQRT function in Excel
By numtan5839 Mon 18 Nov 2019 2:46 pm Board English Language
0
168
Mon 18 Nov 2019 2:46 pm By numtan5839
Deposit money into account with Thailand Post by Bank@post service
By numtan5839 Mon 18 Nov 2019 11:42 am Board English Language
0
186
Mon 18 Nov 2019 11:42 am By numtan5839
Benefits and applications of moving averages
By numtan5839 Mon 18 Nov 2019 10:47 am Board English Language
0
153
Mon 18 Nov 2019 10:47 am By numtan5839
Moving Average
By numtan5839 Sat 16 Nov 2019 2:45 pm Board English Language
0
135
Sat 16 Nov 2019 2:45 pm By numtan5839
weighted arithmetic mean
By numtan5839 Sat 16 Nov 2019 11:56 am Board English Language
0
111
Sat 16 Nov 2019 11:56 am By numtan5839
Digital Marketing Training in Mumbai
By Kanchaan Fri 15 Nov 2019 6:10 pm Board English Language
1
774
Fri 06 Dec 2019 3:16 pm By benjamin28
Thailand Post appease e-commerce with ePacket service
By numtan5839 Fri 15 Nov 2019 5:59 pm Board English Language
0
264
Fri 15 Nov 2019 5:59 pm By numtan5839
The character that precedes Tracking Number - Thailand Post Track & Trace
By numtan5839 Fri 15 Nov 2019 5:09 pm Board English Language
0
111
Fri 15 Nov 2019 5:09 pm By numtan5839
downloading MD Watermark
By bfred Fri 04 Oct 2019 3:21 pm Board English Language
6
1285
Mon 30 Dec 2019 7:26 pm By mindphp
Features Review : Component Mjform Advance untuk meningkatkan form atau borang untuk laman web dgn lebih baik
By abdkode Mon 22 Apr 2019 6:51 pm Board Bahasa Language
0
9092
Mon 22 Apr 2019 6:51 pm By abdkode
Features Review : Mhosting Components untuk mengumpul Packet hosting
By abdkode Mon 22 Apr 2019 6:50 pm Board Bahasa Language
0
1791
Mon 22 Apr 2019 6:50 pm By abdkode
Features Review : Components MD Gallery untuk membuat gelari dalam laman web
By abdkode Mon 22 Apr 2019 6:49 pm Board Bahasa Language
0
3971
Mon 22 Apr 2019 6:49 pm By abdkode