var $ = function (id) { return document.getElementById(id); } //返回dom元素的当前某css值 var getCss = function (obj, name) { //ie if (obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getComputedStyle(obj, null); return style[name]; } } var hide = function (obj, speed, fn) { obj = $(obj); if (!speed) { obj.style.display = 'none'; return; } else { speed = speed === 'fast' ? 20 : speed === 'normal' ? 30 : 50; obj.style.overflow = 'hidden'; } //获取dom的宽与高 var oWidth = getCss(obj, 'width'), oHeight = getCss(obj, 'height'); //每次dom的递减数(等比例) var wcut = 10 * (+oWidth.replace('px', '') / +oHeight.replace('px', '')), hcut = 10; //处理动画函数 var process = function (width, height) { width = +width - wcut > 0 ? +width - wcut : 0; height = +height - hcut > 0 ? +width - hcut : 0; //判断是否减完了 if (width !== 0 || height !== 0) { obj.style.width = width + 'px'; obj.style.height = height + 'px'; setTimeout(function () { process(width, height); }, speed); } else { //减完后,设置属性为隐藏以及原本dom的宽与高 obj.style.display = 'none'; obj.style.width = oWidth; obj.style.height = oHeight; if (fn)fn.call(obj); } } process(oWidth.replace('px', ''), oHeight.replace('px', '')); } var show = function (obj, speed, fn) { obj = $(obj); if (!speed) { obj.style.display = 'block'; return; } else { speed = speed === 'fast' ? 20 : speed === 'normal' ? 30 : 50; obj.style.overflow = 'hidden'; } var oWidth = getCss(obj, 'width').replace('px', ''), oHeight = getCss(obj, 'height').replace('px', ''); var wadd = 10 * (+oWidth / +oHeight), hadd = 10; obj.style.width = 0 + 'px'; obj.style.height = 0 + 'px'; obj.style.display = 'block'; var process = function (width, height) { width = +oWidth - width < wadd ? +oWidth : wadd + width; height = +oHeight - height < hadd ? oHeight : hadd + height; if (width !== +oWidth || height !== +oHeight) { obj.style.width = width + 'px'; obj.style.height = height + 'px'; setTimeout(function () { process(width, height); }, speed); } else { obj.style.width = oWidth + 'px'; obj.style.height = oHeight + 'px'; if (fn)fn.call(obj); } } process(0, 0); }