从右向左滑动？

如何让div从折叠到扩展(反之亦然),但从右到左进行？

我看到的大多数东西总是从左到右.

1> 小智..：

---

$("#slide").animate({width:'toggle'},350);

参考:https://api.jquery.com/animate/

---

工作正常,只有在我尝试时从左向右滑动.是否可以通过其他方式使其动画？

---

唯一的麻烦是,如果里面有内容,它会"横向压扁"它,导致控件移动/调整大小/换行等等.有一个很好的解决方案吗？

2> EnGassa..：

---

这可以使用jQueryUI hide/show方法本机实现.例如.

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

---

@ekerner - 这需要JQueryUI,这是一个庞大的库.如果你想要的只是一个简单的幻灯片过渡,这可能不是答案;)

---

如果您安装了jQueryUI,这是最好的方法.

---

澄清 - 最小文件至少235kb !! 这很好但是@Jesse指出它会大大增加你的页面

3> h0mayun..：

---

用这个:

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

现场演示

改良版

一些代码已添加到演示中,以防止双击时出现双倍边距:http://jsfiddle.net/XNnHC/942/

使用它与缓和;)

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

删除了额外的JavaScript代码.

类名和一些CSS代码已更改

添加了查找是否展开或折叠的功能

改变是否使用缓和效果

改变了动画速度

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

---

计算'px'中的值,因此'%'不可行

4> Erwin Julius..：

---

看看这个使用jQuery UI的 Fiddle 工作示例.这是我原本从左到右使用的解决方案,但我已将其改为从右到左工作.

它允许用户快速单击链接,而不会破坏可用面板中的动画.

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.

添加白色背景和左边填充只是为了更好的效果演示.

---

需要jQuery UI

5> Shwet..：

---

用这个

---

是的,你需要jQuery UI [用于扩展的缓动选项](http://stackoverflow.com/a/12592301/2266583)

6> Hil..：

---

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

---

我全都是评论,但这段代码非常明显.

7> WallTearer..：

---

我这样做了:

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

注意,节点"btn"应该在动画之前隐藏,你可能还需要为它设置"position:absolute".

8> Soichi Hayas..：

---

另一个值得一提的库是animate.css。它非常适合jQuery，您可以通过切换CSS类来制作许多有趣的动画。

喜欢..

$（“＃slide”）。toggle（）。toggleClass（'animated bounceInLeft'）;

9> TetraDev..：

---

带有TweenLite/的 GreenSock动画平台（GSAP）TweenMax提供了比jQuery或CSS3过渡更为平滑且具有更大自定义性的过渡。为了使用TweenLite / TweenMax为CSS属性设置动画，您还需要使用名为“ CSSPlugin”的插件。TweenMax自动包含此内容。

首先，加载TweenMax库：

或轻量版本TweenLite：

然后，调用动画：

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

您也可以使用ID选择器来调用它：

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

如果您已加载jQuery，则可以使用更高级的广泛选择器，例如包含特定类的所有元素：

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

有关详细信息，请参阅： TweenLite文档

根据他们的网站： “ TweenLite是一种非常快速，轻巧且灵活的动画工具，是GreenSock动画平台（GSAP）的基础。”