调用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 相关文章推荐
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python psutil模块简单使用实例
2015/04/28 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python SocketServer源码深入解读
2019/09/17 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
总裁岗位职责
2013/12/04 职场文书
函授自我鉴定范文
2014/02/06 职场文书
新春寄语大全
2014/04/09 职场文书
残疾人小组计划书
2014/04/27 职场文书
推荐信模板
2014/05/09 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS