拔出从左边一个div? 非常简单。 从右边拔不出来? 没那么多。
我要寻找一个div来隐藏屏幕外,但连接到屏幕上的一个小标签。 当用户点击标签,出滑动整个股利。 这是使用jQuery和CSS左基本相当。 虽然从右侧,用户可以直接滚动到看到“隐藏”分区!
这是我想要的( 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/
可能需要做:
body,html { overflow-x:hidden; }
只是身体无“HTML”并没有为我工作。
我使用从这个链接的代码: http://jsfiddle.net/yHPTv/我做了一些更改,在#clickme按钮现在是#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>
正如你所看到的,我还添加了淡出效果,给我点击按钮,因为我需要做的就是添加了#slideout箱内关闭按钮来关闭它放回而不是主#clickme按钮。
帮助深表感谢!
谢谢!
请检查下面的代码和链接,也可能是它会帮助你。
http://jsfiddle.net/avinashMaddy/4bs3zp44/
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
</div>
<div class="clickme">
</div>
<script>
$(function () {
$(".clickme").toggle(function () {
$("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
});
});
</script>