調(diào)用jQuery滑出效果時(shí)閃爍的解決方法
更新時(shí)間：2014年03月27日 16:45:22 作者：
這篇文章主要介紹了在調(diào)用jQuery 滑出效果時(shí)，層會(huì)現(xiàn)次閃爍一下的解決方法,需要的朋友可以參考下
問題現(xiàn)象如題所示，在調(diào)用jQuery 滑出效果時(shí)，層會(huì)現(xiàn)次閃爍一下.在網(wǎng)上找了許多解決文案，說要加如下標(biāo)示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可問題是現(xiàn)在的 標(biāo)題頭已 為 html4.0 ，如若改為上面的情況，則頁(yè)面會(huì)亂掉。最終找到了一個(gè)高手寫的東東，重寫的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();
}
}
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可問題是現(xiàn)在的 標(biāo)題頭已 為 html4.0 ，如若改為上面的情況，則頁(yè)面會(huì)亂掉。最終找到了一個(gè)高手寫的東東，重寫的jQuery的滑出
效果。高手的鏈接地址如下：
http://aqr199.myweb.hinet.net/jquery_slide_iebug.htm
代碼如下：
復(fù)制代碼 代碼如下:
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();
}
}
相關(guān)文章
js實(shí)現(xiàn)從中間開始往上下展開網(wǎng)頁(yè)窗口的方法
這篇文章主要介紹了js實(shí)現(xiàn)從中間開始往上下展開網(wǎng)頁(yè)窗口的方法,是非常實(shí)用的js窗口效果,需要的朋友可以參考下2015-03-03
項(xiàng)目中需要前端書寫登錄頁(yè)面，用戶輸入賬號(hào)密碼，本文主要介紹了js前端登錄加密解決方案，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
基于postman獲取動(dòng)態(tài)數(shù)據(jù)過程詳解
這篇文章主要介紹了基于postman獲取動(dòng)態(tài)數(shù)據(jù)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語法極度簡(jiǎn)潔，同時(shí)還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn)，需要的朋友可以參考下。2017-08-08
本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫組2013-08-08
Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
這篇文章主要介紹了Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享,本文直接給出實(shí)現(xiàn)的代碼,需要的朋友可以參考下2015-05-05
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHei
Javascript拖拽用到的一些關(guān)于位置定位的一些參數(shù)2008-09-09
前端如何判斷多個(gè)請(qǐng)求完畢的實(shí)戰(zhàn)及常見問題
在前端開發(fā)中,判斷多個(gè)請(qǐng)求完畢是一個(gè)常見需求,這篇文章主要介紹了前端如何判斷多個(gè)請(qǐng)求完畢實(shí)戰(zhàn)及常見問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
最近應(yīng)項(xiàng)目要求，需要對(duì)table中的數(shù)據(jù)進(jìn)行升序或降序排列，于是研究了一下js，希望對(duì)大家有幫助。2011-08-08
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)紅包雨效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07