一个没有jQuery UI的从右向左动画的例子，只使用jQuery(任何版本，见https://api.jquery.com/animate/)。

$(document).ready(function() { var contentLastMarginLeft = 0; $(".wrap").click(function() { var box = $(".content"); var newValue = contentLastMarginLeft; contentLastMarginLeft = box.css("margin-left"); box.animate({ "margin-left": newValue }, 500); }); }); .wrap { background-color: #999; width: 200px; overflow: hidden; } .content { width: 100%; margin-left: 100%; background-color: #eee; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> click here <div class="content"> I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right. </div> </div>

我是这样做的:

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

注意，节点“btn”应该在动画之前隐藏，您可能还需要为它设置“position: absolute”。

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

带有TweenLite / TweenMax的GreenSock动画平台(GSAP)提供了比jQuery或CSS3过渡更平滑的过渡，定制性更强。为了用TweenLite / TweenMax动画CSS属性，你还需要他们的插件“CSSPlugin”。TweenMax自动包含这些内容。

首先，加载TweenMax库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

或者是轻量级版本TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

然后，调用你的动画:

 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)的基础。”

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

看看这个使用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。

增加白色背景和左填充只是为了更好的效果呈现。