jQuery 从屏幕右侧拉出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10422005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pull out div from right of screen
提问by ScottieB
Pull out a div from the left? Easy as pie. Pull it out from the right? Not so much.
从左边拉出一个div？非常简单。从右边拉出来？没那么多。
I am looking for a div to be hidden offscreen but connected to a small tag on screen. When the user clicks the tag, out slides the whole div. This is pretty basic from the left using jQuery and CSS. From the right though, a user can just scroll over to see the "hidden" div!
我正在寻找一个隐藏在屏幕外但连接到屏幕上的小标签的 div。当用户点击标签时，整个 div 滑出。这是使用 jQuery 和 CSS 从左边开始非常基本的。但是从右侧，用户只需滚动即可查看“隐藏”的 div！
Here is what I want (http://jsfiddle.net/yHPTv/) except instead of the div being partiallyhidden offscreen-left, I want it partially hidden offscreen-right.
这是我想要的（http://jsfiddle.net/yHPTv/），除了 div部分隐藏在屏幕左侧之外，我希望它部分隐藏在屏幕右侧。
Here is what I've tried so far (http://jsfiddle.net/LU8En/), and obviously it doesn't work since one can just scroll to the right.
这是我迄今为止尝试过的（http://jsfiddle.net/LU8En/），显然它不起作用，因为可以向右滚动。
The problem with using animate (or slide or toggle drop) is that I don't want the whole div to just disappear/appear, I want that little bit to be present.
使用动画（或滑动或切换下拉）的问题是我不希望整个 div 消失/出现，我希望存在一点。
回答by Kevin B
Note, the example below does not work with newer versions of jQuery, read on below for an example that does.
请注意，下面的示例不适用于较新版本的 jQuery，请继续阅读下面的示例。
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
});
});
Change everything from left to right, then reposition the clickme div and the text content.
从左到右更改所有内容，然后重新定位 clickme div 和文本内容。
Also, give the body an overflow-x: hiddento prevent the horizontal scrollbar.
另外，给 body 一个overflow-x: hidden以防止水平滚动条。
A few minor updates makes it compatible with the latest version:
一些小的更新使其与最新版本兼容：
$(function () {
var rightVal = -280; // base value
$("#clickme").click(function () {
rightVal = (rightVal * -1) - 280; // calculate new value
$(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
});
});
回答by Chris
May need to do:
可能需要做：
body,html { overflow-x:hidden; }
Just body without ",html" didn't work for me.
没有“，html”的身体对我不起作用。
回答by Avi
Please check below code and link as well might be it will help you.
请检查下面的代码和链接，也可能会对您有所帮助。
http://jsfiddle.net/avinashMaddy/4bs3zp44/
http://jsfiddle.net/avinashMaddy/4bs3zp44/
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
</div>
<div class="clickme">
</div>
<script>
$(function () {
$(".clickme").toggle(function () {
$("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
});
});
</script>
