调用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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
href下载文件根据id取url并下载
May 28 Javascript
js调试系列 初识控制台
Jun 18 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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 limit的优化
2008/01/10 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python hashlib模块实例使用详解
2019/12/24 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Django跨域请求原理及实现代码
2020/11/14 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL