In-depth learning of jQuery Animate (2)

This article brings you the in-depth study of Animate in jQuery (2), following the previous article [jQuery in-depth study of Animate (1)] to let everyone understand the usage of animate in jQuery . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Step

Type: Function(Number now, Tween tween)
The function that will be called for each animation property of each animated element. This function provides an opportunity to modify the Tween object to change the property values ​​in the settings.

This is so vague, let’s take a look at an example!

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;                
                if(k==1) console.log(fx);
            }
);

Can you imagine the output?

Let’s take a look at the jQuery source code:

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

ok! You should have a rough outline. Let me explain the meaning of the parameters in detail~~

Knowing these, we can do a lot of things!

jQuery Animation implements css3 animation:

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").

Many effects like CSS3 are not numerical, so there is no way to achieve 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 an stp 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.

CSS code:

#box {
  width:100px;
  height:100px;
  position:absolute;
  top:100px;
  left:100px;
  text-indent: 90px;
  background-color:red;
}

Html code:

 <p id="box"></p>

Javascript code:

var s=0;
$('#box').animate({  textIndent: 0 }, {   //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。
   duration:2000,
   step: function(now,fx) {
        s++;
        fx.start=45;//你可以尝试修改start,end值，来看rotate的变化
        fx.end=0;        
        if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
      $(this).css('-webkit-transform','rotate('+now+'deg)');
   }
});

The text-indent attribute is used here to trigger animation because we are here There is no text, so using text-indent will not affect the style effect of the element. Font-size, etc. can also be used here. Then use the rhythm generated by the animate() method to implement animation.

The above is the detailed content of In-depth learning of jQuery Animate (2). For more information, please follow other related articles on the PHP Chinese website!