jq hide show

时间:2023-03-09 04:30:25
jq hide show
 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);
}