slideDown執行上沒有問題, 在縮小(slideUp)時, 當height等於零, 反而會顯示全部內容, 但是畫面閃一下, 內容又被隱藏了。
=__= 亂成一團的blog
請到 痞客邦 或到 線上展示
為了這個小問題又殺進JQuery內部去了解animate,
研究心得整理, 要製作動畫需考量改變屬性、重覆執行及變化速度控制
改變屬性:
除了高度(height), 寬度(width), 透明度(opacity)之外, JQuery在
高度變化增加了marginTop, marginBottom, paddingTop, paddingBottom屬性,
寬度變化增加了marginLeft, marginRight, paddingLeft, paddingRight屬性
fxAttrs = [
// height animations
[ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
// width animations
[ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
// opacity animations
[ "opacity" ]
];
重覆執行:setInterval(重覆執行, 直到clearInterval清除), setTimeout(只執行一次, 要重覆使用)。
timerId = setInterval(jQuery.fx.tick, 13);
變化速度控制:利用時間變化比率來改變, JQuery每13毫秒執行一次, 示意程式碼如下。
timeRate(600,function(r){
document.write('
'+r+'
');
});
function timeRate(step,fn){
var t = now();
var timeId = setInterval(function(){
var t1 = now();
var rate = ((t1-t)>step) ? 1 : (t1-t)/step;
fn(rate);
if(rate==1){clearInterval(timeId);}
},13);
}
function now() {
return (new Date).getTime();
}
結果問題在於動畫完成的最後是執行隱藏物件, 將物件display屬性設為none
如果是直接執行是沒有問題, 但是它卻是透過setInterval來執行, 反而造成時間差, 才會有閃一下的情況發生。
解決方案
改變它:jQuery.fx.step是實際執行的函數, 變更相關參數後, 再執行jQuery.fx.update改變物件屬性。
var n = t - this.startTime;
var dur = this.options.duration;
this.state = n / dur;
// Perform the easing function, defaults to swing
var specialEasing = this.options.specialEasing && this.options.specialEasing[this.prop];
var defaultEasing = this.options.easing || (jQuery.easing.swing ? "swing" : "linear");
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);
this.now = this.start + ((this.end - this.start) * this.pos);
// Perform the next step of the animation
//this.update();
if(this.now<1){
this.step(true);
}else{
this.update();
}
自己做
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();
}
}
以上~~希望對你有幫助
原文地址