jQuery的動畫開始中途

Question

我有這樣的CSS代碼

#storage_screen { 
    top: -100%; 
    width: 100%; 
    height: 100%; 
    background: url(../images/new24/_landing/storage_window/container_background.png); 
    position: absolute; 
    z-index: 99999999999999; 
} 

這jQuery代碼

$('#storage_icon').click(function() { 
    $("#storage_screen").animate({top: "0"}, 600,); 
}); 

，但是當我嘗試它的動畫似乎開始中途由於某種原因，東西用我認爲的百分比做。

如果有人知道這個問題的任何修復，我會非常感激！ :)

Answer 1

問題是最有可能是你想從一個百分比值的像素值（0像素）的動畫。如果您將動畫目標更改爲0%而不是僅僅0，它應該可以工作。

$('#storage_icon').click(function() { 
    $("#storage_screen").animate({top: "0%"}, 600); 
}); 

Answer 2

嘗試把一些初始值top屬性在CSS部分

top:-200px; 

取決於div的高度，就可以進一步提高它也許-300px。據我所知，你正在試圖從頂部視角作爲一個效果。你也可以使用jQuery的slideDown（）。給出了類似的效果。

CSS：

#storage_screen { display:none; } 

的jQuery：

$('#storage_icon').click(function() { 
$("#storage_screen").slideDown('slow'); 
});