//把 任意對象 的 任意數值屬性 改變為 任意的目標值function animate(obj, json, fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true;for (var k in json) {if (k === "opacity") {//opacity要特殊處理//opacity沒有單位 參與運算自動轉換成數值 所以不用parsetInt//取值范圍 0-1 0.1 0.33 33 為了讓以前的計算公式生效 要擴大100倍var leader = getStyle(obj, k) * 100;var target = json[k] * 100;var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader / 100;//opacity沒有單位} else if (k === "zIndex") {obj.style.zIndex = json[k];//層級不需要漸變 直接設置即可} else {var leader = parseInt(getStyle(obj, k)) || 0;var target = json[k];var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader + "px";}if (leader != target) {flag = false;}}if (flag) {clearInterval(obj.timer);if (fn) {fn();}}}, 15);}//全部屬性都到達目標值才能清空function getStyle(obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle(obj, null)[attr];} else {return obj.currentStyle[attr];}}

?

轉載于:https://www.cnblogs.com/lsy0403/p/5882786.html

總結

以上是生活随笔為你收集整理的javascript动画函数封装（升级版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。