调用jQuery滑出效果时闪烁的解决方法
更新时间：2014年03月27日 16:45:22 作者：
这篇文章主要介绍了在调用jQuery 滑出效果时，层会现次闪烁一下的解决方法,需要的朋友可以参考下
问题现象如题所示，在调用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();
}
}
复制代码 代码如下:
<!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();
}
}
相关文章
这篇文章主要介绍了详解js创建对象的几种方式和对象方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了JavaScript实现简单的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
下面小编就为大家带来一篇json对象与数组以及转换成js对象的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
单击浏览器右上角的X关闭窗口弹出提示的小例子，需要的朋友可以参考一下2013-06-06
本文主要分享了js实现无缝滚动图的示例代码，这个版本可以控制左右滚动，鼠标点击对应的广告会自动滑动把广告完全展示出来，当鼠标离开，接着继续滚动。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能。这篇文章主要带大家学习一下PixiJS是如何实现文字绘制的，希望对大家有所帮助2023-02-02
提示不难做，那个三角号样式很难调兼容，死了好多脑细胞预览主窗口提示错位，保存本地测比较好。2011-04-04
只能输入数字在以往都是使用replace方法实现的，在本文你将学习到不使用它依然可以实现，具体代码如下，感兴趣的朋友可以参考下2013-09-09
这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论