search

Home >Web Front-end >JS Tutorial >Several usages and precautions of animate in jQuery

Several usages and precautions of animate in jQuery

高洛峰
高洛峰Original
2016-12-28 09:31:441375browse

1. animate syntax structure 

animate(params,speed,callback)

params: a mapping containing style attributes and values, such as {key1:value1,key2:value2}

speed: Speed ​​parameter [optional]

callback: function executed when the animation is completed [optional]

2. Customize simple animation

Use a simple example To illustrate, click on a div to achieve the effect of horizontal floating on the page. 

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

In order to make the element move, you need to change the left attribute. In order to affect the element's top, right, bottom, and left attribute values, the element's position must be declared.

Several usages and precautions of animate in jQuery

3. Accumulation and Accumulation Subtraction Animation

In the previous code, the attribute {left: "100px"} was set as a parameter , if rewritten as {left:"+=25px"}, the effect is as follows

Several usages and precautions of animate in jQuery

##4. Multiple animations


Execute multiple animations at the same time


The above example is a very simple animation. If you want to perform multiple animations at the same time, for example, while the element slides to the right, the height of the element is enlarged.

The code is as follows: 

$(this).animate({left:"+=25px",height:"+=20px"},1000)

Several usages and precautions of animate in jQuery##5. Execute multiple animations in sequence


In the above example, sliding to the right and increasing the height occur at the same time. If you want the box to slide to the right first and then become taller, you only need to split the code

as follows: 

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

The execution of animation effects like this has a sequence, which is called "animation queue"

## 6. Comprehensive ExampleSeveral usages and precautions of animate in jQuery

Click the square to make it move to the right while increasing its height and opacity from 50% to 100%, then move it up and down, widen, and fade out when finished. 

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut(&#39;slow&#39;)
   })

When applying multiple effects to the same element, these effects can be queued in a chained manner.

7. Animation callback functionSeveral usages and precautions of animate in jQuery

In the above example, if you want to switch the css style (background: blue) in the last step, instead of Fade out, if handled as usual, the relevant code is as follows: 

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

However, the css() method is called early.

The reason for this problem is that the css() method will not be added to the animation queue, but will be executed immediately. You can use callback functions to implement queuing for non-animated methods. Several usages and precautions of animate in jQuery

The correct relevant code is as follows: 

$("#cube").click(function(){
 $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
 .animate({top:"40px",width:"100px"},500,function(){
  $(this).css("border","5px solid blue")
 })
})

It is worth noting that callback applies to all jquery animation methods, such as slideDown(), show(), etc. Several usages and precautions of animate in jQuery

Summary

The above are several usages and precautions about animate in jquery. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message. comminicate. Thank you for your support to the PHP Chinese website.

For more articles related to the usage and precautions of animate in 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：jQuery realizes dynamic increase of three-dimensional numbers (animate method)Next article：jQuery realizes dynamic increase of three-dimensional numbers (animate method)

Related articles

See more