调用jQuery滑出效果时闪烁的解决方法

136 阅读 0 评论 90 点赞

我是靠谱客的博主忧虑帆布鞋，最近开发中收集的这篇文章主要介绍调用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(); 
} 
} 