从上图可以看出，height已经达到了400px，但是width停在了410px,为什么不是400px ? 因为width = 400的时候， 就是( cur == 500 ) 相当于( 400 == 500 ) 不成立，所以执行了else语句，width = cur + 10 = 400 + 10 = 410，然后height到达400px停止了定时器，所以width停在了410px.
那么我们怎么解决这个问题呢？
其实也好办，就是height = 400的时候 不要把定时器关了，应该等width = 500的时候再关闭定时器，不就在同一时间，完成了同时到达目标的效果吗？
修改后的代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background: red; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); oBox.onmouseover = function(){ animate( this, { "width" : 500, "height" : 400 }, 10 ); } function animate(obj, attr, speed) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { var bFlag = true; for ( var key in attr ) { if (key == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } var target = attr[key]; if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } if ( bFlag ) { clearInterval( obj.timer ); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script> </head> <body> <div></div> </body> </html>
声明一个变量，每次变化完一次( width, height )样式 把bFlag = true， 只要在for循环中有一个没有到达目标，bFlag的值都是false，这样就不会关闭定时器。当两个都到达目标，才关闭定时器.
三、顺序运动
如样式变化，按顺序来，不是同时变化， 如：
oBox.onmouseover = function(){ //回调函数： 把函数当做参数传递给另一个函数 animate( this, { 'width' : 500 }, 10, function(){ animate( this, { 'height' : 500 }, 10 ); } ); }
当把width变成500px的时候，如果传递了回调函数， 再接着执行回调函数里面的运动
修改后的完整代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通用的匀速运动框架 - by ghostwu</title> <style> div { width: 200px; height: 200px; background: red; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); oBox.onmouseover = function(){ //回调函数： 把函数当做参数传递给另一个函数 animate( this, { 'width' : 500 }, 10, function(){ animate( this, { 'height' : 500 }, 10 ); } ); } function animate(obj, attr, speed, fn ) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { var bFlag = true; for (var key in attr) { if (key == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } var target = attr[key]; if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } if (bFlag) { clearInterval(obj.timer); fn && fn.call( obj ); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script> </head> <body> <div></div> </body> </html>
以上这篇打造通用的匀速运动框架(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: