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

jq hide show的更多相关文章

  1. easyui源码翻译1.32--SearchBox(搜索框)

    前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...

  2. easyui源码翻译1.32--Slider(滑动条)

    前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...

  3. Bootstrap的Model源码详细注释 (转)

    原文: http://my.oschina.net/haogrgr/blog/323079?p=1 /* =============================================== ...

  4. java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  5. JQ动画 show hide

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  7. jquery的show/hide/toggle详解

    通过阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法,所以我们要搞明白原理必须先看一下这2个方法. jQuery.fn.extend({ ...... ...

  8. JQ返回顶部代码分享~~~~

    1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(sc ...

  9. html/京东项目/京东网页高仿/js/jq/css/java web/

    登录部分HTML+CSS: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8& ...

随机推荐

  1. 转 Android开发者指南-Manifest.xml-<supports-screens

    <supports-screens> 版本:Android 3.2 语法: <supports-screensandroid:resizeable=["true" ...

  2. 关于SVN 提交一半卡死的问题

    解决方案 1:将项目刷新一下 2:然后在到 project - clean 一下项目 3:之后提交svn 不过暂时不能确认 要等下方进度条的 svn更新状态完成 在点击确认进行提交 4:Buildin ...

  3. 【转】CentOS安装PF_RING(虚拟机)

    1.       概述 PF_RING是Luca Deri发明的提高内核处理数据包效率,并兼顾应用程序的补丁,如Libpcap和TCPDUMP等,以及一些辅助性程序(如ntop查看并分析网络流量等). ...

  4. HDU 1166 敌兵布阵(树状数组)

    之前用过了线段树的做法,树状数组的也补上吧 #include<iostream> #include<cstdio> #include<cstring> using ...

  5. 对于使用了SSH造成的中文乱码问题,4大解决方法

    修改struts2.xml struts2.xml 中添加 <constant name="struts.i18n.encoding" value="UTF-8&q ...

  6. JAVA基础---面向对象

    方法的重载Overload: 一个类中可以定义有相同的名字, 参数不同的多个方法. 调用时, 会根据不同的参数选择对应的方法. static: 在数据区, 可以计数,属于类,不属于对象: public ...

  7. [转] spring事务管理几种方式

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  8. highcharts分段显示不同颜色

    最近在做统计图的时候,碰到一个需求 类似如下: 就是在红色虚线框内的折线在不同区域用不同的颜色表示,并且是虚线. 开始定位为用highcharts库实现.确定用这个库后,开始在网上查资料,发现有类似的 ...

  9. Manacher 最长回文子串。

    最长回文子串就是一个字符串的一个子串,他从左往右读和从右往左读是一样的. 可以用 Manacher 算法来求,他的复杂度是 O(n) . 可以看这篇文章 http://blog.csdn.net/yw ...

  10. Codeforces#355

    大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include <iostream> #include <cstdio> #i ...