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. 后台前台json传递数据的方式两种方式 $.get, $.getJSON

    第一种getJSON方式: 前台调用: <td><input type="text" class="t" id="edutitle& ...

  2. centos和ubuntu下使用cron设置定时任务

    1.启动cron工具[ps:使用root权限] centos启动cron两种方式 a) /etc/init.d/crond start b) service crond start ubuntu启动c ...

  3. 用TcpClient如何获取远程网页的内容

    用TcpClient如何获取远程网页的内容 private string GetHTMLTCP(string URL) { string strHTML = "";//用来保存获得 ...

  4. Popular Products

    Popular Products 描述 Given N lists of customer purchase, your task is to find the products that appea ...

  5. CentOS 修改Mysql的root密码

    1.知道密码 第一次登陆(无密码) mysqladmin -u root password NEWPASSWORD 修改过密码 mysqladmin -u root -p 'oldpassword' ...

  6. Android Guts: Intro to Loopers and Handlers

    One of the reasons I love Android API is because it contains so many useful little things. Many of t ...

  7. (中等) CF 555E Case of Computer Network,双连通+树。

    Andrewid the Android is a galaxy-known detective. Now he is preparing a defense against a possible a ...

  8. javascript 中 function bind()

    Function bind() and currying <%-- All JavaScript functions have a method called bind that binds t ...

  9. Spring mvc 返回json格式 - 龙企阁 - 博客频道 - CSDN.NET

    第一次使用spring mvc ,在此也算是记录一下以防忘记,希望有经验的朋友指出不足的地方 一.使用maven管理jar. <dependency> <groupId>org ...

  10. Cannot call sendError() after the response has been committed - baiyangliu - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...