我怎樣才能讓一個div停留在兩個其他div與jqueryui幻燈片laternating？

Question

我面臨以下問題：

我有一個包含三個其他div的容器div。 前兩個隱藏（顯示：無）第三個包含：文本，圖像或任何東西。當用戶點擊一個按鈕時，我希望三個div中的第一個可以用jQuery滑動，第三個可以在剛剛出現的那個下面移動。當再次點擊該按鈕時，第一個div應該向上滑動，第二個div也應該通過向上滑動出現。這應該被扭轉，下次按鈕被點擊時，無限...

我已經實現了我認爲會做這項工作，但唉，我錯了。 兩個div完全按照他們的要求移動，但第三個div保持低於其他兩個。

我的HTML是：

<div style="position: relative"> 
<div id="topMenuDivision" style="border: 1px solid; display: none; position:absolute"> 
    here is Div 1 
</div> 
<div id="bottomMenuDivision" style="border: 1px solid; display: none; position:absolute"> 
    here is Div 2 
</div> 
<div style="position: relative"> 
    I want this to be at the bottom, bellow the other two regardless which (if any) is shown 
</div> 

我的JavaScript：

window.currentlyOpen = "none"; 
function togleTheDivs() 
{ 
    if (window.currentlyOpen=='none') 
    { 
     $('#topMenuDivision').show('slide',{direction: 'up'},750,callBack); 
     currentlyOpen = 'top'; 
    }else if (window.currentlyOpen=='top') 
    { 
     $('#topMenuDivision').hide('slide',{direction: 'up'},750,callBack); 
     $('#bottomMenuDivision').show('slide',{direction: 'down'},750,callBack); 
     currentlyOpen = 'bottom'; 
    }else if (window.currentlyOpen=='bottom') 
    { 
     $('#topMenuDivision').show('slide',{direction: 'up'},750,callBack); 
     $('#bottomMenuDivision').hide('slide',{direction: 'down'},750,callBack); 
     currentlyOpen = 'top'; 
    } 
} 

function callBack() 
{ 

} 

這裏是我的代碼的jsfiddle：

http://jsfiddle.net/QTW3u/9/

可能是定位？錯誤地使用幻燈片？我在這裏不知所措... 任何想法？

Answer 1

你的代碼很好，唯一的問題是前兩個div的絕對定位。 如果您刪除它們，它就會起作用。

但是接下來，您可能會發現在前兩個div可見的時候（動畫期間）底部跳轉。避免這種情況的最簡單的方法，只有當第一個移動完成時纔會動畫第二個。

事情是這樣的：http://jsfiddle.net/QTW3u/16/

if (window.currentlyOpen=='none') 
{ 
    $('#topMenuDivision').show('slide',{direction: 'up'},750); 
    currentlyOpen = 'top'; 
}else if (window.currentlyOpen=='top') 
{ 
    $('#topMenuDivision').hide('slide',{direction: 'up'},750,function() { 
     $('#bottomMenuDivision').show('slide',{direction: 'down'},750); 
    }); 
    currentlyOpen = 'bottom'; 
}else if (window.currentlyOpen=='bottom') 
{ 
    $('#bottomMenuDivision').hide('slide',{direction: 'up'},750, function() { 
     $('#topMenuDivision').show('slide',{direction: 'down'},750); 
    }); 
    currentlyOpen = 'top'; 
}