Example of animate of method usage in jQuery

  • 2020-05-09 18:08:24
  • OfStack

This article illustrates the use of the animate() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:

This method is used to create a custom animation and can specify the duration of the animation and the erasing effect. You can also trigger a callback function after the animation is complete.

Use of the animate() method:

Method 1:

Define the animation termination style property as a property name/value object. Such as:

$("div").animate( {width:"1000px"})

The above code can adjust div from its original width to 1000px. You can also use multiple groups of property name/value objects once. Such as:

$("div").animate( {width:"1000px",fontSize:20})

The above code is able to adjust div from its original width to 1000px, and from its original font size to 20px. Special attention should be paid to the following three points:

1. If the dimensions have no units, the default unit is px.
2. Attribute values should be enclosed in double quotation marks, which can be omitted if the attribute values are numeric.
3. Properties such as font-szie or background-color need to be left out of the middle line and the first letter of the second word should be capitalized.

The animate() method specifies the duration of the animation, or if it does not, the default value normal. Such as:

$("div").animate( {width:"1000px",fontSize:20},2000)

The above code specifies that the animation should be completed after 2000 milliseconds (2 seconds).
The callback function can be called after the animation is completed. Such as:

$("div").animate( {width:"1000px"},5000,function(){alert(" Adjust the complete ")})

The above code can trigger the callback function after the animation is completed, and a prompt box will pop up.
Example code:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </title>
<style type="text/css">
div{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate( {width:"1000px",fontSize:20},5000,function(){alert(" Adjust the complete ")});
  });
});
</script> 
</head>
<body>
  <div> The little ants </div>
  <button id="btn1"> Execute an animation </button>
</body>
</html>

Method 2:
In mode 1, you only use curly braces {} when you define the animation termination style properties, which are all exposed, such as animation speed, callback functions, and so on, separated by commas. In mode 2, which we will cover, speed, callback functions, queues, and so on are all in curly braces {}. Such as:

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

The queue parameter can specify whether the animation is joined in the animation queue for execution. If the animation is joined in the animation queue, it will be executed in order, that is, after the execution of the first animation, the second animation in the queue will be executed, and so on. If the queue parameter is true, the animation is queued for execution, otherwise it is not queued.
The duration parameter defines the duration of the animation.
The complete parameter defines the callback function for the animation.
Example code:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </title>
<style type="text/css">
.first{
  width:150px;
  height:150px;
  border:1px solid blue;
}
.second{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".first").animate({width:"1000px"},{queue:true, duration:5000,complete:function a(){alert(" The width setting is completed. ")}})
.animate( {fontSize:'7em'},{queue:true, duration:5000})
.animate( {borderWidth:10},{queue:true, duration:5000,complete:function a(){alert(" The width setting is completed. ")}});
  });
  
  $("#btn2").click(function(){
    $(".second").animate({width:"1000px"},{queue:false, duration:1000})
.animate( {fontSize:'7em'} , 1000 )
.animate( {borderWidth:10}, 1000);
  })
})
</script>
</head>
<body>
<div class="first"> Welcome to script house </div>
<div class="second"> Welcome to script house </div>
<button id="btn1"> The first 1 An animation </button>
<button id="btn2"> The first 2 An animation </button>
</body>
</html>

You can compare the effect of adding animation queue and not adding animation queue.

I hope this article has helped you with your jQuery programming.


Related articles: