调用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 Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
js中settimeout方法加参数
Feb 28 Javascript
javascript计时器详解
Feb 28 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
vue实现树形菜单效果
Mar 19 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
javascript的this关键字详解
May 20 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
JavaScript实现筛选数组
Mar 02 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
新闻分类录入、显示系统
2006/10/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
js实现进度条的方法
2015/02/13 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python求众数问题实例
2014/09/26 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
JPA的特点
2014/10/25 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
会计应聘求职信范文
2013/12/17 职场文书
高中军训感言1000字
2014/03/01 职场文书
市场营销战略计划书
2014/05/06 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js