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);
    }

 

posted @ 2013-12-11 11:50  sexy_girl  阅读(563)  评论(0编辑  收藏  举报