Home > Developer > JavaScript
Chain Motion Analysis of JS motion effects and chain of js motion effects
This article describes the chain motion of JS motion effects. We will share this with you for your reference. The details are as follows:
The previous article titled how to add motion to any value of JS motion effects
Chain Movement: One motion followed by one motion. For example, move the mouse into the div to increase the width first, then increase the height, and then change the transparency. Not much nonsense. Use chestnuts !!
When the mouse moves into the div, The div first becomes wide, is becoming high, and then changes the transparency; the removal is restored to its original state;
To achieve the chain movement, you needstartMove()Function Improvement
function startMove(obj,attr,iTarget,fn)Input one moreFn ParametersWhen a motion ends, the next motion continues.You need to determineIf there is another motion, execute the next one. If not, continue to execute the next motion.
if(fn){ fn();}
Complete Test code:
HTML section:
<body><div id="div1"></div></body>
Css section:
<style> #div1{ width: 200px;height: 200px; background: green; }</style>
Js section:
<Script> window. onload = function () {var oDiv = document. getElementById ('div1 '); oDiv. onmouseover = function () {startMove (oDiv, 'width', 300, function () {startMove (oDiv, 'height', 300, function () {startMove (oDiv, 'opacity ', 30) ;}) ;}} oDiv. onmouseout = function () {startMove (oDiv, 'opacity ', 100, function () {startMove (oDiv, 'height', 200, function () {startMove (oDiv, 'width', 200) ;}) ;}} fun Ction getStyle (obj, attr) {return getComputedStyle? GetComputedStyle (obj, false) [attr]: obj. currentStyle [attr];} function startMove (obj, attr, iTarget, fn) {// fn: Execute the function clearInterval (obj. timer); obj. timer = setInterval (function () {var objAttr = 0; if (attr = "opacity") {objAttr = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {objAttr = parseInt (getStyle (obj, attr);} var iSpeed = (iTarget-objAttr) /10; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (objAttr = iTarget) {clearInterval (obj. timer); if (fn) {// if the "next moving function" is passed, execute fn () ;}} else {if (attr = "opacity ") {obj. style. filter = 'Alpha (opacity: '+ (objAttr + iSpeed) +') '; obj. style. opacity = (objAttr + iSpeed)/100;} else {obj. style [attr] = objAttr + iSpeed + 'px ';}}, 30) ;}</script>
To be continued ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
