jquery Animate Step Implementation CSS3 Property animation

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.

But under the Animate method, only numeric values can create animations (such as "top:30px"), and values of string value types cannot create animations (such as "background-color:red"). And the work we encounter more is to use jquery animate to control the CSS3 attribute, and CSS3 a lot of effect because not numerical, so there is no way directly through the animate () development method to achieve. Such development methods as translate (), rotate (), scale (), skew (), and so forth, are characterized by the combination of characters and numbers, such as: Rotate (360deg);

It's okay. The animate () method has an STP parameter that sets the callback function to perform step for each stage of animation execution. We can use a CSS value that does not affect the effect of elements to trigger the animate () development method, and then in the step callback function to modify the value we want to modify, so that the animation can be implemented indirectly, instance:

<style>
. demo{width:200px;height:200px;border:1px solid #f00;}
</style>
<div class= "Demo" >
jquery Animate control CSS3 Properties
</div>
<script>
$ (". Demo"). Animate ({
deg:360
}, {
Step:function (n, FX) {
Console.log (n);
$ (this). CSS ("transform", "rotate (" + n + "deg)");
},
duration:2000
});
</script>

Run to see the animation effect, for step this key parameter usage, see the relevant comments below, the online introduction is almost no, purely personal opinion:

<script>
 $ (". Demo"). Animate ({
  first:2,
  second:10
 }, {
  step:function (n,fx) {
   //the function that each animation property of an animation element will call every time the animation effect is executed. The 1th parameter is the real time value of the property being changed by the current animation (the real-time feedback rendering of the property value during every 1 animation); The 2nd parameter provides an opportunity to modify the Tween object to change the value of the property set in the animate 1th parameter at the end of the animation.
   //fx:jQuery.fx A reference to a prototype object that contains a number of properties, such as
   //the element that performs the animation: Elem;
    //animations are changing properties: prop;
   //is changing the current value of the property: now;
   //is changing the ending value of the property: end;
   //the unit in which the property is being changed: units; etc
   
   // Here you can change the properties set in the 1th parameter of animate second the value at the end of the animation
   if (fx.prop== "second") {fx.end=5}
    console.log (fx.prop+ ":" +n);
  },
  duration:2000
 }
</script>