调用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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 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学习之PHP变量
2006/10/09 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PDO::getAttribute讲解
2019/01/28 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
three.js实现圆柱体
2018/12/30 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
javascript实现评分功能
2020/06/24 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Django模板语言 Tags使用详解
2019/09/09 Python
NumPy排序的实现
2020/01/21 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
公司年终奖分配方案
2014/06/16 职场文书
单位单身证明样本
2014/10/11 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
铁人观后感
2015/06/16 职场文书
德能勤绩工作总结
2015/08/11 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
高中信息技术教学反思
2016/02/16 职场文书