調用jQuery滑出效果時閃爍的解決方法

更新時間：2014年03月27日 16:45:22 作者：

這篇文章主要介紹了在調用jQuery 滑出效果時，層會現(xiàn)次閃爍一下的解決方法,需要的朋友可以參考下

問題現(xiàn)象如題所示，在調用jQuery 滑出效果時，層會現(xiàn)次閃爍一下.在網(wǎng)上找了許多解決文案，說要加如下標示：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

可問題是現(xiàn)在的標題頭已為 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創(chuàng)建對象的幾種方式和對象方法
這篇文章主要介紹了詳解js創(chuàng)建對象的幾種方式和對象方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
Javascript中innerHTML用法實例分析
這篇文章主要介紹了Javascript中innerHTML用法,實例分析了實用innerHTML獲取對應元素內容的使用技巧,需要的朋友可以參考下
2015-01-01
JavaScript實現(xiàn)簡單的彈窗效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
json對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨son對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
單擊瀏覽器右上角的X關閉窗口彈出提示的小例子
單擊瀏覽器右上角的X關閉窗口彈出提示的小例子，需要的朋友可以參考一下
2013-06-06
js實現(xiàn)無縫滾動圖（可控制當前滾動的方向）
本文主要分享了js實現(xiàn)無縫滾動圖的示例代碼，這個版本可以控制左右滾動，鼠標點擊對應的廣告會自動滑動把廣告完全展示出來，當鼠標離開，接著繼續(xù)滾動。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
PixiJS學習之如何實現(xiàn)文字的繪制
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能。這篇文章主要帶大家學習一下PixiJS是如何實現(xiàn)文字繪制的，希望對大家有所幫助
2023-02-02
新鮮出爐的js tips提示效果
提示不難做，那個三角號樣式很難調兼容，死了好多腦細胞預覽主窗口提示錯位，保存本地測比較好。
2011-04-04
實現(xiàn)只能輸入數(shù)字的input不用replace方法
只能輸入數(shù)字在以往都是使用replace方法實現(xiàn)的，在本文你將學習到不使用它依然可以實現(xiàn)，具體代碼如下，感興趣的朋友可以參考下
2013-09-09
微信小程序實現(xiàn)授權登錄
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)授權登錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05