从右向左滑动？ | 易学教程

我怎样才能使div从折叠状态变为展开状态（反之亦然），却又从右向左移动呢？

我在那里看到的大多数东西总是从左到右。

#1楼

我这样做是这样的：

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

请注意，节点“ btn”应在动画之前隐藏，并且您可能还需要为其设置“ position：absolute”。

#2楼

用这个：

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

现场演示

改良版

该演示中已添加了一些代码，以防止双击时出现双重利润： http : //jsfiddle.net/XNnHC/942/

轻松使用它;）

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

多余的JavaScript代码已删除。
类名和一些CSS代码已更改
添加功能以查找是否展开或折叠
更改是否使用缓动效果
更改的动画速度

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

#3楼

用这个

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

#4楼

看一下Fiddle上的这个工作示例，该示例使用jQuery UI 。这是我最初从左到右使用的一种解决方案，但是我将其更改为从右到左使用。

它允许用户快速单击链接，而不会破坏可用面板之间的动画。

JavaScript代码很简单：

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

在Fiddle链接中获取HTML和CSS。

添加了白色背景和左填充以更好地呈现效果。

#5楼

您可以先将元素的宽度定义为0，向右浮动，然后在您要显示它的事件上..就像

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

就那么简单。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3165951

标签

jQuery UI

jquery