我如何才能使div停留在要與jqueryui slide同步的其他兩個div之下？

Question

我面臨以下問題：

我有一個包含其他三個div的容器div。 前兩個隱藏（顯示：無），第三個包含某些內容：文本，圖像或其他內容。 當用戶單擊一個按鈕時，我希望三個div中的第一個使用jQuery向下滑動，而第三個div移動到剛出現的那個div下方。 再次單擊該按鈕時，第一個div應該向上滑動，而第二個div也應該通過向上滑動而出現在其位置。 下次單擊按鈕時，這應該被逆轉。

我已經實現了我認為可以勝任的工作，但是las，我錯了。 兩個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';
}