Home > Article > Web Front-end > Implement page animation effects through jquery (example code)

Implement page animation effects through jquery (example code)

高洛峰Original: 2016-12-28 10:35:051318browse

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

Basic form of animate function

The basic form of animation effect achieved through animate is:

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

{params} is a required item. It is an object that specifies the CSS style that we want the specified element to have after it runs through the animation effect. Speed and callback are both optional, and speed specifies The speed at which the animation runs, its value can be a numeric type (for example, 1000 means that the animation will change to the style specified by params within 1 second), slow or fast. callback specifies the function to be executed after the animation ends.

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:&#39;250px&#39;,
   opacity:&#39;0.5&#39;,
   height:&#39;150px&#39;,
   width:&#39;150px&#39;
  });
 });
});
</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 for variables in the {params} object

Regarding the variables in the {params} object, you can assign values in the following forms.

Absolute value form

The code example given above is to assign the params object in absolute value form

Relative value form

For example Say to add "+", "-", etc. in front of the variable value.

Code example:

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

show, hide and toogle

We can also assign the variable values of the params object to the above three values, such as the following code, its function That is to make the content of the div tag disappear.

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

The above article about realizing the animation effect of the page through jquery (example code) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more related articles on page animation effects (example code) achieved through jquery, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example analysis of select drop-down box selection trigger event based on jQueryNext article：Example analysis of select drop-down box selection trigger event based on jQuery

See more

Implement page animation effects through jquery (example code)

Related articles