从静态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}); 
}); 
});