使用靜態div從屏幕右邊緣滑動div

Question

我只是想要頁面上的靜態按鈕/圖像/ div，其onclick會激活一個單獨的div從屏幕右側滑動。 這個鏈接實際上是我想要的：

http://jsfiddle.net/yHPTv/876/

問題是，我不希望按鈕隨其滑動，它應該保持在頁面的靜態位置。 然后，我想要一個在新可見的div中的“關閉”按鈕。

 $(function () { $("#clickme").toggle(function () { $(this).parent().animate({right:'0px'}, {queue: false, duration: 500}); }, function () { $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}); }); }); 

 body { overflow-x: hidden; } #slideout { background: #666; position: absolute; width: 280px; height: 80px; top: 45%; right:-280px; padding-left: 20px } #clickme { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background: #ff0000; } #slidecontent { float:left; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="slideout"> <div id="slidecontent"> Yar, there be dragonns herre! </div> <div id="clickme"> </div> </div> 

Answer 1

一種可能的解決方案是改為滑動內容div。 就像是：

http://jsfiddle.net/yHPTv/877/

更新的CSS：

#slidecontent {
position: absolute;
right: 0px;
}

更新的JS：

$(function () {
$("#clickme").toggle(function () {
    $(this).siblings("#slidecontent").animate({right:'280px'}, {queue: false, duration: 500});
}, function () {
    $(this).siblings("#slidecontent").animate({right:'0px'}, {queue: false, duration: 500});
});
});