我怎么能有一个div从折叠到展开(反之亦然)，但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
我用滚动做的一个例子(只是HTML, CSS和JS，只是用jquery库)。向下滚动时，按钮将向左滑动。
另外，如果你只想要这种效果，我建议你不要使用jQuery UI，因为它太沉重了(如果你只是想使用它)。
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
检查这个例子
其他回答
或者你可以用
$('#myDiv').toggle("slide:right");
如果你的div是绝对定位的，你知道宽度，你可以使用:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
它会滑出屏幕。
或者，你也可以用容器div来包装它
#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}
#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}
<div id="myContainer">
<div id="myDiv">Wheee!</div>
</div>
$('#myDiv').animate({left:'-200'},1000);
使用这个
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>
$("#slide").animate({width:'toggle'},350);
参考:https://api.jquery.com/animate/
这可以通过使用jQueryUI隐藏/显示方法来实现。 如。
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
参考:http://docs.jquery.com/UI/Effects/Slide
