我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?

我在外面看到的大部分东西都是从左到右的。


当前回答

你可以先定义元素的宽度为0,右浮动,然后在你要显示它的事件上。就像这样

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

就这么简单。

其他回答

请看这里的例子。

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

使用这个

<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/

用这个:

$('#pollSlider-button').animate({"margin-right": '+=200'});

现场演示

改进版本

演示中添加了一些代码,以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/

轻松使用它;)

http://jsfiddle.net/XNnHC/1591/

删除了额外的JavaScript代码。 类名和一些CSS代码更改 增加了查找是否展开或折叠的功能 改变了是否使用缓和效果 改变动画速度

http://jsfiddle.net/XNnHC/1808/

这可以通过使用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