从屏幕右侧拉出 div答案

【问题标题】：Pull out div from right of screen从屏幕右侧拉出 div
【发布时间】：2012-05-02 21:28:48
【问题描述】：

从左边拉出一个div？易如反掌。从右边拉出来？没那么多。

我正在寻找一个隐藏在屏幕外但连接到屏幕上的小标签的 div。当用户点击标签时，整个 div 滑出。从左边开始，这是使用 jQuery 和 CSS 非常基本的。但是，从右侧，用户可以滚动查看“隐藏”的 div！

这就是我想要的 (http://jsfiddle.net/yHPTv/)，除了 div 不是部分隐藏在屏幕左侧，我希望它部分隐藏在屏幕右侧。

这是我迄今为止尝试过的 (http://jsfiddle.net/LU8En/)，显然它不起作用，因为只能向右滚动。

使用动画（或滑动或切换下拉）的问题是我不希望整个 div 只是消失/出现，我希望那一点存在。

【问题讨论】：

第二个 jsfiddle 似乎与您的描述不符； div 仍然从左侧拉出。我是不是误会了？
抱歉，我一定是在开始更改之前复制了它。

标签： jquery css html hidden slide

【解决方案1】：

http://jsfiddle.net/yHPTv/3/

请注意，下面的示例不适用于较新版本的 jQuery，请继续阅读下面的示例。

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

从左到右更改所有内容，然后重新定位 clickme div 和文本内容。

另外，给 body 一个 overflow-x: hidden 以防止水平滚动条。

一些小的更新使其与最新版本兼容：

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

http://jsfiddle.net/yHPTv/2968/

【讨论】：

啊，溢出！谢谢你这么正确和这么快！
旧帖子，但也许有人会看到这个。此示例不适用于 JQuery。有什么快速解决办法吗？
是的，将切换替换为单击。 .toggle 不再绑定点击事件。

【解决方案2】：

可能需要做的：

body,html { overflow-x:hidden; }

没有“，html”的正文对我不起作用。

【讨论】：

【解决方案3】：

请检查下面的代码和链接，可能会对您有所帮助。

http://jsfiddle.net/avinashMaddy/4bs3zp44/

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



<script>
  $(function () {
     $(".clickme").toggle(function () {
       $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
      }, function () {
    $("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
   });
  });
</script>

【讨论】：