调用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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
angularjs 缓存的使用详解
2018/03/19 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
计算机应用专业毕业生求职信
2013/10/24 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
新学期开学演讲稿
2014/05/24 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Redis批量生成数据的实现
2022/06/05 Redis