调用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 相关文章推荐
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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分页函数
2006/07/08 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript动画浅析
2012/08/30 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
想学画画?python满足你!
2020/12/24 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
保安自我鉴定范文
2013/12/08 职场文书
物理力学求职信
2014/02/18 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
先进个人自荐书
2015/03/06 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫