我如何獲得一個垂直菜單以與我的jQuery移動面板一起滑出？

Question

因此，我在屏幕的右側有一個菜單（僅圖標），並且我希望在面板打開時使圖標隨面板滑出。 但我希望關閉面板時菜單可見。 一幅圖像將打開一個面板，另一幅圖像將打開另一個面板。

<div class="buttons right">
            <a href="#rightpanel3" data-role="button" data-inline="true" class="filter">One</a> 
            <a href="#rightpanel1" data-role="button" data-inline="true" class="layers">Two</a> 
            <a href="#rightpanel2" data-role="button" data-inline="true" class="list">Three</a> 
            <a href="#rightpanel4" data-role="button" data-inline="true" class="settings">four</a>
</div>
<div data-role="panel" id="rightpanel3" data-position="right"
            data-display="overlay" data-dismissible="false" data-theme="b">
            <h3>Search/Filter</h3>
            <h4 class="top heading">Search</h4>
            <h4 class="heading">Filter</h4>
</div>

jsfiddle： jsfiddle.net/5GhPM

Answer 1

可能需要進行一些調整，但這可行：

$("#rightpanel3").on("panelopen", function() {
    $(".buttons.right").animate({ marginRight: $("#rightpanel3").width() });
});

$("#rightpanel3").on("panelclose", function() {
    $(".buttons.right").animate({ marginRight: -($("#rightpanel3").width()) });
});

http://jsfiddle.net/yRu4q/

這些事件記錄在這里 。