从右向左滑动？答案

【问题标题】：Slide right to left?从右向左滑动？
【发布时间】：2010-10-10 10:38:29
【问题描述】：

如何让 div 从折叠状态变为展开状态（反之亦然），但要从右到左？

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

当元素有内部填充时，您也可以添加paddingLeft: 'toggle', paddingRight: 'toggle'。
工作正常，只是在我尝试时它会从左向右滑动。是否有可能让它以相反的方式制作动画？
唯一的麻烦是如果里面有内容，它会水平“挤压”它，导致控件移动/调整大小/换行等。有没有好的解决方案？
您的代码需要更多 CSS 才能看起来像真正的幻灯片
@NeilBarnwell 如果可以的话，将内容放入一个固定宽度的包装器中，并使用容器的overflow: hidden。

【解决方案2】：

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

【讨论】：

@ekerner - 这需要 JQueryUI，这是一个庞大的库。如果你想要的只是一个简单的幻灯片过渡，这可能不是答案；）
如果您安装了 jQueryUI，这是最好的方法。
澄清一下 - 最小文件至少为 235kb！这很好，但正如@Jesse 指出的那样，它将大大增加您的页面
使用custom builder并删除除幻灯片动画之外的所有内容，可以将缩小的JS缩小到20KB以下。
我希望 JQuery UI 文档有这样的例子。谢谢

【解决方案3】：

我是这样做的：

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

注意，节点“btn”应该在动画之前隐藏，您可能还需要设置“位置：绝对”。

【讨论】：

为什么不使用width: 'toggle'？ btn.show().animate({width: 'toggle'}, {duration: 500}); 是你所需要的，我相信。

【解决方案4】：

使用这个：

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

Live demo

改进版

演示中添加了一些代码，以防止双击时出现双页边距：http://jsfiddle.net/XNnHC/942/

与缓动一起使用 ;)

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

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

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

【讨论】：

计算 'px' 中的值，因此对于 '%' 不可行
每次点击都会向左移动。
您可以检查外部宽度并使用它来添加右边距

【解决方案5】：

使用这个

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

【讨论】：

是的，你需要 jQuery UI for the extended easing options

【解决方案6】：

查看 Fiddle 上的 this working example，它使用 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。

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

【讨论】：

是的。它在提供的示例链接中指出 [jsfiddle.net/erwinjulius/az4JL/]

【解决方案7】：

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

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

就这么简单。

【讨论】：

【解决方案8】：

GreenSock Animation Platform (GSAP) 和 TweenLite / TweenMax 提供了比 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 Documentation

根据他们的网站： “TweenLite 是一种极其快速、轻量级和灵活的动画工具，是 GreenSock 动画平台 (GSAP) 的基础。”

【讨论】：

【解决方案9】：

从右到左动画的示例没有 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>

【讨论】：

【解决方案10】：

在此处查看示例。

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

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

【讨论】：

您在发帖前查看了this answer 吗？

【解决方案11】：

另一个值得一提的库是animate.css。它与 jQuery 配合得很好，而且你可以通过切换 CSS 类来制作很多有趣的动画。

喜欢..

$("#slide").toggle().toggleClass('动画bounceInLeft');

【讨论】：

【解决方案12】：

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

【讨论】：

我完全支持 cmets，但这段代码非常不言自明。

【解决方案13】：

我使用滚动（仅 HTML、CSS 和 JS，仅使用 jquery 库）完成的示例。 向下滚动时，按钮会向左滑动。

另外，如果你只想要这个效果，我建议你不要使用 jQuery UI，因为它太重了（如果你只是想用它）。

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

查看this example

【讨论】：

是的，CSS 过渡是当今实现这一目标的最佳方式之一。

【解决方案14】：

如果您的div 绝对定位并且您知道宽度，则可以使用：

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

这会将其滑出屏幕。

或者，您可以将其包装在容器 div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);

【讨论】：

【解决方案15】：

或者你可以使用

$('#myDiv').toggle("slide:right");

【讨论】：

当用其他 14 个现有答案回答一个十年前的问题时，这将有助于解释您的答案带来了什么新方法，以及在提出问题时它是否有效，或者它是否正在使用在这十年中出现的技术。
@JasonAller 为什么会这样？
@groovenectar 这个问题的答案是一篇很长的文章，不适合这里，在这里会偏离主题。我建议你在可以进行全面讨论的 meta 上问这个问题。
@JasonAller，对旧问题的新回答通常是最有价值的。所以我希望人们继续这样做，不要气馁参与 StackExchange。由于这样做的价值，一种方法应该是对 SE 的更新，例如在版主的帮助下重新发布问题等...对回答旧问题的做法是一种祝福，而不是阻止用户发布有用的答案...
@groovenectar 请告诉我在我的评论中我不鼓励为旧问题添加新答案？在旧问题上放弃的仅代码答案不如既有代码又有解释的答案有用。

【解决方案16】：

我在尝试为小屏幕尺寸编写菜单时遇到了类似的问题。我采用的解决方案是将其从视口中推开。

我使用 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>

【讨论】：