JS animation effect (moving, change effect) to achieve finishing __js

such as in the first two blog results, the image deceleration slide to the designated position, in the Web page effect looks more beautiful, the user is more friendly, the effect of the implementation of the collation found a fixed pattern.

Implementation steps:

Define the current value of the property that needs to be modified: var = 0; Define the attribute target value that needs to be modified: var target = value; Define a Timer object: var timeinter= null; To loop through the pins with setinterval every 20 milliseconds modify the current value once the current value and target value are equal, the execution of the Stop SetInterval method is noteworthy, before each call to the SetInterval method To clear the previous setinterval, there will be multiple simultaneous runs. This can be understood as a Java thread, each run setinterval ran a small thread, and we want the effect is to run only one thread at a time, if not empty will cause multiple setinterval action on top of an object, making animation more quickly or other abnormal effects. The function of the timer Timeinter is to clear an unprecedented before the next setingerval run.

Code Structure Example:

var srcinter = null; 
var current = 0;
    Window.onscroll = function () {
        var target = =;
        Clearinterval (timeinter);
        Timeinter= setinterval (function () {Current
            = current + (target-current)/20;
            Obj.style.top = current+ "px";		Implement the move effect of the Obj object
        },20);
    }