我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
如果你的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);
其他回答
如果你的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);
我用滚动做的一个例子(只是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)'});
}
});
检查这个例子
使用这个
<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/
一个没有jQuery UI的从右向左动画的例子,只使用jQuery(任何版本,见https://api.jquery.com/animate/)。
$(document).ready(function() { var contentLastMarginLeft = 0; $(".wrap").click(function() { var box = $(".content"); var newValue = contentLastMarginLeft; contentLastMarginLeft = box.css("margin-left"); box.animate({ "margin-left": newValue }, 500); }); }); .wrap { background-color: #999; width: 200px; overflow: hidden; } .content { width: 100%; margin-left: 100%; background-color: #eee; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> click here <div class="content"> I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right. </div> </div>