一个没有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>

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

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

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

我是这样做的:

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

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

在尝试为小屏幕尺寸的菜单编写代码时，我遇到了类似的问题。 我的解决方案是把它从视口中赶走。

我使用SASS和JQuery(没有JQuery UI)，但这都可以在原生JS和CSS中实现。

https://codepen.io/maxbethke/pen/oNzMLRa

var menuOpen = false var init = () => { $(".menu__toggle, .menu__blackout").on("click", menuToggle) } var menuToggle = () => { console.log("Menu:Toggle"); $(".menu__blackout").fadeToggle(); if(menuOpen) { // close menu $(".menu__collapse").css({ left: "-80vw", right: "100vw" }); } else { // open menu $(".menu__collapse").css({ left: "0", right: "20vw" }); } menuOpen = !menuOpen; } $(document).ready(init); .menu__toggle { position: absolute; right: 0; z-index: 1; } .menu__blackout { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; } .menu__collapse { position: absolute; top: 0; right: 100vw; bottom: 0; left: -80vw; background: white; -webkit-transition: ease-in-out all 1s; transition: ease-in-out all 1s; z-index: 11; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="menu__toggle">Toggle menu</button> <menu class="menu"> <div class="menu__blackout"></div> <div class="menu__collapse"> <ul class="list"> <li class="list__item"> <a class="list__item__link" href="#section1">Menu Item 1</a> </li> <li class="list__item"> <a class="list__item__link" href="#section2">Menu Item 2</a> </li> <li class="list__item"> <a class="list__item__link" href="#section3">Menu Item 3</a> </li> <li class="list__item"> <a class="list__item__link" href="#section4">Menu Item 4</a> </li> <li class="list__item"> <a class="list__item__link" href="#section5">Menu Item 5</a> </li> </ul> </div> </menu>

使用这个

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