调用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 loading加载效果实现代码
Nov 24 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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/11/26 PHP
PHP strtotime函数详解
2009/12/18 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php获取微信openid方法总结
2019/10/10 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
教导主任竞聘演讲稿
2014/05/16 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python