jquery – 从屏幕右侧拉出div

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

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

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

这是我到目前为止所尝试的(http://jsfiddle.net/LU8En/),显然它不起作用,因为可以向右滚动.

使用动画(或幻灯片或切换拖放)的问题在于我不希望整个div只是消失/出现,我想要一点点存在.

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

另外,给身体一个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/