2012-02-10 108 views
5

這個工程,但我不知道爲什麼。在function capIn()中,我認爲行$botcap.slideDown("slow")應該向下滑動div。它滑過去了。如果我嘗試使用.slideUp(),則不會發生任何反應,如果它試圖將其滑下來。任何人都可以向我解釋這個嗎?JQuery.slideDown()向上滑動

$(".slide").hover(capIn, capOut); 

function capIn(){ 
    //slide top caption down 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideDown("slow"); 

    //slide bottom caption up 
    //!! Why does slideDown slide caption up here? 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideDown("slow") 
} 

function capOut(){ 
    //slide top back up 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideUp("slow"); 

    //slide bottom back down 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideUp("slow"); 
} 
+3

如果您可以在http://www.jsfiddle.net上進行演示,您可以發佈標記或更好嗎? – Rafay 2012-02-10 16:32:10

+0

您能否提供小提琴 - 你的描述很難形象化。 – 2012-02-10 16:32:47

+0

需要更多關於HTML和CSS中發生了什麼的標記。很難說只是基於這個javascript怎麼回事 – Downpour046 2012-02-10 16:38:04

回答

9

jQuery的slideDownslideUp功能實際上是用詞不當。正如slideUp的文檔所述:

用滑動運動隱藏匹配的元素。

隱藏是通過修改元素的高度來實現的;通常情況下,這意味着元素的下邊緣看起來向上滑動,因此名稱。但是,如果元素錨定在底部(例如,通過設置position: absolutebottom: 0),則高度修改將使頂部邊緣向下滑動。

+0

有趣。謝謝你解釋。 – 2012-02-10 16:45:10

0

一種可能的修復方法是將$('.botcap')元素換成一個容器並將容器對齊到底部。

+0

您必須確保您的容器高度設置爲'.botcap'的完整可見高度。 – 2012-02-10 16:50:31

0

發生了同樣的問題,擡起頭來看這個問題,但自己找到了答案。這是因爲定位元素的絕對位置和底部:0;這實際上將該元素視爲基於底部的,因此其slideDown()向上。它可以通過使用頂部:(元素的高度)而不是底部來修復:0.