Animation Effects on the Page Implemented by jQuery (Example Code)

There are many functions that can be used to realize animation effects, among which the animate function is one of the most common. The following is a brief introduction to the usage of this function.

Basic form of animate function

The basic form of animation realization through animate is:

$(selector).animate({params},speed,callback);

where {params} is a required item, which is an object indicating the CSS styles that the specified element should have after the animation effect is executed, and 'speed' and 'callback' are optional. 'speed' specifies the speed of the animation, which can be a numeric type (such as1000 indicates that the animation lasts1The 's' option makes the animation smooth, 'slow' and 'fast'. The 'callback' option specifies the function to be executed after the animation is completed.

Code Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/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>

Multiple assignment forms of variables in the {params} object

The variables in the {params} object can be assigned in the following form.

Absolute value form

The code example given in the previous article assigns the params object through the absolute value form

Relative value form

For example, you can add the word "+""-"and so on."

Code Example:

<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   height:'+=150px',
   width:'+=150px'
  });
 });
});
</script>

show, hide, and toggle

The variable values of the params object can also be assigned the same three values, for example, the following code makes the content of the div tag disappear.

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

This article on how to implement animation effects on the page through jQuery (example code) is all the content that the editor shares with everyone. It is hoped that this can provide a reference for everyone and everyone is welcome to support the Naoan Tutorial.

Basic Tutorial