调用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获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
JS+DIV实现拖动效果
Feb 11 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 魔术函数使用说明
2010/05/14 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js常用代码段整理
2011/11/30 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python实现类的创建与使用方法示例
2017/07/25 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
高二政治教学反思
2014/02/01 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年质检工作总结
2015/05/04 职场文书
自书遗嘱范文
2015/08/07 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书