从屏幕右侧拉出div [英] Pull out div from right of screen

问题描述

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

Pull out a div from the left? Easy as pie. Pull it out from the right? Not so much.

我正在寻找一个div隐藏在屏幕外，但连接到屏幕上的一个小标签。当用户点击标签时，滑出整个div。这是从左边使用jQuery和CSS非常基本。从右边，用户可以只滚动查看隐藏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!

这里是我想要的（ http://jsfiddle.net/yHPTv/ ），而不是div 部分隐藏offscreen-left，我想要部分隐藏offscreen-right。

Here is what I want (http://jsfiddle.net/yHPTv/) except instead of the div being partially hidden offscreen-left, I want it partially hidden offscreen-right.

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

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.

问题使用动画（或幻灯片或切换下拉）是我不想让整个div刚刚消失/出现，我想要一点点出现。

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.

推荐答案

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和文本内容。

Change everything from left to right, then reposition the clickme div and the text content.

此外，给身体一个 overflow-x：hidden ，以防止水平滚动条。

Also, give the body an overflow-x: hidden to prevent the horizontal scrollbar.

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

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

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

这篇关于从屏幕右侧拉出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！