Question

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

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

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

这是我到目前为止所尝试的内容（http://jsfiddle.net/LU8En/），显然它不起作用，因为可以向右滚动。

使用动画（或幻灯片或切换拖放）的问题在于我不希望整个div只是消失/出现，我希望有一点点存在。

Answer 1

请注意，下面的示例不适用于较新版本的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和文本内容。

另外，给身体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/

Answer 2

可能需要这样做：

body,html { overflow-x:hidden; }

没有“，html”的身体对我不起作用。

Answer 3

我正在使用此链接中的代码：http://jsfiddle.net/yHPTv/ 我做了一些更改，＃clickM按钮现在在#slideout框之外。

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

            }, function () {
                $("#slideout").animate({left:'-100%'}, {queue: false, duration: 500});
            });
        });
    </script>

正如你所看到的，我还为click me按钮添加了淡出效果，因为我需要做的是在#slideout框内添加一个关闭按钮，将其关闭，而不是主#clickme按钮。 / p>

非常感谢帮助！

谢谢！

Answer 4

请检查以下代码和链接，也可能会对您有帮助。

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>

从屏幕右侧拉出div

4 个答案: