调用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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
JS实现一个简单的日历
Feb 22 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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下实现折线图效果的代码
2007/04/28 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
js实现导航跟随效果
2018/11/17 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
.net C#面试题
2012/08/28 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
办理退休介绍信
2014/01/09 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2014年党支部工作总结
2014/11/13 职场文书
民事二审代理词
2015/05/25 职场文书
创业计划书之干洗店
2019/09/10 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript