我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
你可以先定义元素的宽度为0,右浮动,然后在你要显示它的事件上。就像这样
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
就这么简单。
其他回答
用这个:
$('#pollSlider-button').animate({"margin-right": '+=200'});
现场演示
改进版本
演示中添加了一些代码,以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/
轻松使用它;)
http://jsfiddle.net/XNnHC/1591/
删除了额外的JavaScript代码。 类名和一些CSS代码更改 增加了查找是否展开或折叠的功能 改变了是否使用缓和效果 改变动画速度
http://jsfiddle.net/XNnHC/1808/
使用这个
<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>
另一个值得一提的库是animation .css。它可以很好地与jQuery一起工作,您可以简单地通过切换CSS类来制作许多有趣的动画。
像. .
$(“#slide”).toggle().toggleClass('animation bounceInLeft');
请看这里的例子。
$("#slider").animate({width:'toggle'});
https://jsfiddle.net/q1pdgn96/2/
$("#slide").animate({width:'toggle'},350);
参考:https://api.jquery.com/animate/