我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个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)'});
}
});
检查这个例子
其他回答
我用滚动做的一个例子(只是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");
另一个值得一提的库是animation .css。它可以很好地与jQuery一起工作,您可以简单地通过切换CSS类来制作许多有趣的动画。
像. .
$(“#slide”).toggle().toggleClass('animation bounceInLeft');
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
我是这样做的:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
注意,节点“btn”应该在动画之前隐藏,您可能还需要为它设置“position: absolute”。