Animate-queue and step-animate, animate-queue

Animate-queue and step-animate, animate-queue

Step-animate:

Divided into three parts: {configuration}, {step: function () {...}, duration: 1000}

<Div id = "warpper" >$ ("# warpper "). animate ({// even if the opacity is only configured, the opacity still has an animation effect, increasing opacity from 0: "0.5", // custom configuration: Number configuration, rotate: "125" will increase from 0, // custom configuration: from 0 to Na // The Last configuration cannot be followed; background: "red" // step has two current values: now and fx}, {step: function (now, fx) {transform (this).css ("transform ", "rotate (" + now + "deg)"); // use fx. prop gets the configured rotate for judgment // now has 15 decimal places, so it is best to resolve it to Int type if (fx. prop = "rotate" & parseInt (now) <47 & parseIn T (now)> 43) {// The animation cannot control the color! So either step or queue is used. Certificate (this).css ("background", "red"); // fx. elem. id: fx can obtain the ID Attribute console of the element (elem. log (fx. elem. id); // obtain the initial trial end value of the configuration console. log (fx. start + "-" + fx. end);} // specifies the animation duration. // The animation duration cannot be at the end;}, duration: 1000});}) </script>

 

Delete the animation queue through queue and use dequeue to continue the animation

$ ("# Warpper "). click (function () {$ ("div "). show ("slow "). animate ({left: '+ = 200'}, 1000 ). queue (function () {$ (this ). addClass ("newcolor"); $ (this ). dequeue ();}). animate ({left: '-= 200'}, 1500 ). queue (function () {$ (this ). removeClass ("newcolor"); $ (this ). dequeue ();}). slideUp () ;}); $ ("# stop "). click (function () {$ ("div "). queue ("fx", []);/* if there is a queue, add this sentence to stop */$ ("div "). stop () ;}); clear all unexecuted queues $ ("div "). clearQueue ();