The JQuery animation works by changing the CSS style of an element from one state to another. CSS property values are gradually changed, so you can create animation effects. Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red"). Please refer to the jquery effect-animate () method and the official tutorial for detailed usage.
Like CSS3 a lot of effect because it is not numeric, so there is no way directly through the animate () method to achieve. One feature of these methods, such as translate (), rotate (), scale (), skew (), matrix (), Rotatex (), Rotatey (), is that their values are mixed with characters and numbers. Therefore, we can not directly use the animate () method to dynamically modify their values to achieve the effect of animation.
If we implement CSS3 animations ourselves with JavaScript, then we can only implement them from the SetInterval () method, which is more complicated. In fact, the animate () method is based on the SetInterval () method to work, but can be easily set animation speed, can also be set to be uniform or variable speed. The second use of the Animate () method has a step parameter that sets the function to be executed for each stage of the animation. We can use a CSS value that does not affect the effect of the element to trigger the animate () method, and then modify the value we want to modify in the step callback function so that the animation can be implemented indirectly. Please see transform example:
Copy Code code as follows:
<div id= "box" ></div>
#box {
width:100px;
height:100px;
Position:absolute;
top:100px;
left:100px;
text-indent:90px;
background-color:red;
}
$ (' #box '). Animate ({textindent:0}, {
Step:function (NOW,FX) {
$ (this). CSS ('-webkit-transform ', ' Rotate (' +now+ ' deg) ');
},
Duration: ' Slow '
}, ' linear ');
Here use the Text-indent property to trigger the animation, because we do not have text here, so use text-indent without affecting the style effect of the elements, here can also use font-size and so on. The animation is then implemented using the rhythm generated by the animate () method. And so on, we can achieve a lot of results. For specific examples please refer here
Reference documentation
jquery Effect-animate () method
.animate ()
