3

从左边拉出一个div？非常简单。从右边拉出来？没那么多。

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

这是我想要的（http://jsfiddle.net/yHPTv/），除了 div 不是部分隐藏在屏幕外，我希望它部分隐藏在屏幕外。

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

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

4

3 回答 3

12

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/

于 2012-05-02T21:34:49.467 回答
0

可能需要做：

body,html { overflow-x:hidden; }

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

于 2014-01-08T07:51:52.833 回答
0

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

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>
于 2014-08-12T17:39:38.463 回答