從靜態div的屏幕右邊緣滑動div

Question

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

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

代碼：

<div id="slideout"> 
    <div id="slidecontent"> 
     Yar, there be dragonns herre! 
    </div> 
    <div id="clickme"> 
    </div> 
</div> 

的JavaScript：

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

CSS：

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; 
} 

的問題是，是我不希望按鈕與它一起滑動，它應該保持在頁面上的靜態位置。然後，我想在新顯示的div中使用「關閉」按鈕。有任何想法嗎。謝謝x

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}); 
}); 
});