调用jQuery滑出效果时闪烁的解决方法


Posted in Javascript onMarch 27, 2014

问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示:

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

可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉。最终找到了一个高手写的东东,重写的jQuery的滑出

效果。高手的链接地址如下:
http://aqr199.myweb.hinet.net/jquery_slide_iebug.htm

代码如下:

var b1 = new slide_fix($('#Div3')); 
$('#Button5').click(function(){b1.close();});//收 
$('#Button6').click(function(){b1.open();});//? function slide_fix(b){ 
var h = b.height(); 
var step = 600; 
var time = 13; 
this.open = function(){ 
timeRate(step,function(c,r){ 
var h1 = h*r; 
b.height(h1); 
if(c==1){b.show();} 
}); 
} 
this.close = function(){ 
timeRate(step,function(c,r){ 
var h1 = h *(1-r); 
b.height(h1); 
if(r==1){b.hide();} 
}); 
} 
function timeRate(step,fn){ 
var t = now(); 
var count = 1; 
var timeId = setInterval(function(){ 
var t1 = now(); 
var rate = ((t1-t)>step) ? 1 : (t1-t)/step; 
fn(count,rate); 
if(rate==1){clearInterval(timeId);} 
count++; 
},time); 
} 
function now() { 
return (new Date).getTime(); 
} 
}
Javascript 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 #Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 #Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 #Javascript
js弹出确认是否删除对话框
Mar 27 #Javascript
js或jquery实现页面打印可局部打印
Mar 27 #Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 #Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php构造函数与析构函数
2016/04/23 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
web页面录屏实现
2019/02/12 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
采购部部门职责
2013/12/15 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
精彩自我鉴定
2014/01/16 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
诚信承诺书
2015/01/19 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
董事长年会致辞
2015/07/29 职场文书
护士旷工检讨书
2015/08/15 职场文书