jQuery Animation Implementation of CSS3 Animation Example Introduction_jquery

jQuery Animation works by changing the CSS style of an element from one state to another. CSS property values ​​change gradually, allowing you to create animated effects. Only numeric values ​​can be animated (e.g. "margin:30px"). String values ​​cannot be animated (such as "background-color:red"). For detailed usage, please refer to the jQuery Effect - animate() method and official tutorial.

Many effects like CSS3 are not numerical, so there is no way to implement them directly through the animate() method. Such as translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY() and other methods. One feature of these methods is that their values ​​​​are mixed with characters and numbers. Therefore, we cannot directly use the animate() method to dynamically modify their values ​​​​to achieve animation effects.

If we use JavaScript to implement CSS3 animation ourselves, then we can only implement it through the setInterval() method, which is more complicated to implement. In fact, the animate() method works based on the setInterval() method, but you can conveniently set the animation speed, and you can also set whether it is a constant speed or a variable speed. The second usage of the animate() method has a step parameter that specifies the function to be executed at each step of the animation. We can use a CSS value that does not affect the element significantly 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 the transform example:

Copy code The code is as follows:

#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');

The text-indent attribute is used here to trigger the animation because we have no text here, so text-indent is used without affecting the style effect of the element. Here it is also You can use font-size, etc. Then use the rhythm generated by the animate() method to implement animation. By analogy, we can achieve many effects. For specific examples, please refer here

Reference documentation
•jQuery effect - animate() method
•.animate()