调用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 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
javascript中对对层的控制
2006/12/29 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
常用的javascript设计模式
2017/01/11 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python集合用法实例分析
2015/05/30 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
德国电子商城:ComputerUniverse
2017/04/21 全球购物
final, finally, finalize的区别
2012/03/01 面试题
财务部岗位职责
2013/11/19 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL