调用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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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启发和小结
2010/11/01 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
js中this的用法实例分析
2015/01/10 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue配置请求本地json数据的方法
2018/04/11 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python列表操作使用示例分享
2014/02/21 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
消防器材管理制度
2014/01/28 职场文书
会计求职简历自我评价
2015/03/10 职场文书
党小组考察意见
2015/06/02 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python