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& ...
随机推荐
- JavaScript 面向对象(一)
参考:http://www.iteye.com/topic/1123555
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- offsetXXX和scollXXX的一些操作
<!doctype html><html><head><meta charset="utf-8"><title>offs ...
- 简单三段式状态机实验1-SOS
一直想从一段式状态机切换到三段式状态机,从书上和网上不断搜寻三段式案例及方法,感觉很简单,就想拿之前做过的实验把一段式改成三段式,可是写起来并非那么简单,很棘手,改完后也没有成功,尤其状态机里面的计数 ...
- UESTC 771 最大容积(前缀后缀和)
题目链接:http://acm.uestc.edu.cn/#/problem/show/771 最大容积 Time Limit: 3000/1000MS (Java/Others) Memor ...
- 过实现鹰眼图这个功能来进一步学习MapControl控件
我们通过实现鹰眼图这个功能来进一步学习MapControl控件.在实现鹰眼图之前,我们需 要接口有更深入的了解. 变主动为被动-出接口(OutBound interface) COM编程类似客户端和服 ...
- JQuery使用和选择器
1.优点 (1)能解决浏览器的兼容性JS问题 (2)解决JS代码冗余的问题 (3)动画效果更容易实现 2.压缩过的和不压缩的区别 (1)开发过程中用未压缩的:上线后用压缩版本. (2)版本问题:1.X ...
- Cocos2dx 学习笔记整理----第一个项目
接上一节, 进入新建的项目下面的proj.win32下面,找到项目名.sln文件(我的是game001.sln),双击会通过VS2010打开.(当然,你装了VS什么版本就是什么版本) 将你的项目设为启 ...
- MySQL 索引的使用
一.or 的使用 (1)MySQL版本大于 5.x 的会使用 index merge 功能,即可以将多个单列索引集合起来使用,不过在查询时使用 or 的话,引擎为 myisam 的会开启 index ...
- Struts2实现异步调用机制详细剖析(XML和JSON)
一.使用XML传递 1.页面展示getXML.jsp <%@ page language="java" import="java.util.*" page ...