调用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 相关文章推荐
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
Javascript验证方法大全
Sep 21 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
深入认识javascript中的eval函数
2009/11/02 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue实现购物车加减
2020/05/30 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
老公爱的承诺书
2014/03/31 职场文书
教职工代表大会主持词
2014/04/01 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
学历证明范文
2015/06/16 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server