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);
}
jq hide show的更多相关文章
- easyui源码翻译1.32--SearchBox(搜索框)
前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...
- easyui源码翻译1.32--Slider(滑动条)
前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...
- Bootstrap的Model源码详细注释 (转)
原文: http://my.oschina.net/haogrgr/blog/323079?p=1 /* =============================================== ...
- 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设计 的宗旨是“ ...
- JQ动画 show hide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq倾斜的动画导航菜单
效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...
- jquery的show/hide/toggle详解
通过阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法,所以我们要搞明白原理必须先看一下这2个方法. jQuery.fn.extend({ ...... ...
- JQ返回顶部代码分享~~~~
1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(sc ...
- html/京东项目/京东网页高仿/js/jq/css/java web/
登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
随机推荐
- css div inline 与 span 区别
不是说用了display:lnline就变内联原素 和span有区别更奇怪的是ff里面执行就没区别 <span style="">xxx</span> &l ...
- copy_part_stat.sql
spool 04_copy_part_stat.log conn / as sysdba execute sys.dbms_stats.export_schema_stats(ownname=> ...
- Google IP
http://173.194.130.4/http://64.233.167.165/
- gdb 远程调试android进程 -转
什么是gdb 它是gnu组织开发的一个强大的unix程序调试工具,我们可以用它来调试Android上的C.C++代码. 它主要可以做4件事情: 随心所欲地启动你的程序. 设置断点,程序执行到断点处会停 ...
- c# dev控件 gridcontrol 数据跟随鼠标滚轮滚动也可以编辑
在绑定书到gridControl后经常发现: 如果你设置了 this.gridView3.OptionsBehavior.Editable = false; 那数据可以跟随滚轮滚动,但如果你要复制某个 ...
- 树列复选框Extjs
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- html5中的postMessage解决跨域问题
解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...
- Unity3d之剥离alpha通道
unity中, 将图集的 alpha 通道剥离出来可减少包体大小和内存使用大小. 方法是将原来的一张 rgba 图分成一张 rgb 和一张 alpha 图,android上rgb和alpha图均采用e ...
- DHCP详解
概述 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服务供应商自动分 ...
- Hibernate批量提交
的 批量插入(Batch inserts) 如果要将很多对象持久化,你必须通过经常的调用 flush() 以及稍后调用 clear() 来控制第一级缓存的大小. Session session = s ...