调用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实现代码
Jun 11 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
JS实现可以用键盘方向键控制的动画
Dec 11 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/10/09 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
初学python数组的处理代码
2011/01/04 Python
python判断端口是否打开的实现代码
2013/02/10 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python算法之图的遍历
2017/11/16 Python
Python实战之制作天气查询软件
2019/05/14 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
什么是Python中的顺序表
2020/06/02 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
环境工程专业个人求职信
2013/12/05 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书