从右向左滑动?


390

我怎样才能使div从折叠状态变为展开状态(反之亦然),而又从右向左移动呢?

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




Answers:


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

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


paddingLeft: 'toggle', paddingRight: 'toggle'当元素具有内部填充时,您也可以添加。
piotr_cz

17
效果很好,只有在尝试时它才能从左向右滑动。是否可以使它反方向运动?
twan

2
唯一的麻烦是,如果内部有内容,它将水平“挤压”它,从而导致控件在周围移动/调整大小/包装等。是否有好的解决方案?
尼尔·巴恩威尔

1
您的代码需要CSS看起来更像是真正的幻灯片
AmerllicA

1
@NeilBarnwell,如果可以,将内容放入固定宽度的包装中,并放入容器的overflow: hidden
本·菲利普

239

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


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

9
这是安装jQueryUI的最佳方法。
2012年

5
要澄清-最小文件至少为235kb!很好,但正如@Jesse指出的那样,它将大大增加您的页面
Ukuser32 '16

1
使用自定义生成器并删除幻灯片动画以外的所有内容,可以将压缩后的JS压缩到20KB以下。
Skylar Ittner

我希望JQuery UI文档将有这样的示例。谢谢
andreszs 18-4-7的

76

用这个:

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

现场演示

改进版

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

轻松使用它;)

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

  • 多余的JavaScript代码已删除。

  • 类名和一些CSS代码已更改

  • 添加功能以查找是否展开或折叠

  • 更改是否使用缓动效果

  • 更改的动画速度

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


2
以“ px”为单位计算值,因此对于“%”不可行
Faisal Ashfaq 2015年

每次点击都会向左移动。
Elyor

您可以检查外部宽度并使用它来添加正确的边距
Tofandel

22

看一下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。

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


8
需要jQuery UI
Jeroen K

是。在提供的示例链接中指出了这一点[ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius

19

用这个

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

7
是的,您需要使用jQuery UI 来扩展扩展选项
zanderwar

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

11
我只想发表评论,但是这段代码是不言自明的。
乔恩(Jon)

7

我这样做是这样的:

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

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


为什么不使用width: 'toggle'btn.show().animate({width: 'toggle'}, {duration: 500});我相信,这就是您所需要的。
Aart den Braber

6

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

喜欢..

$(“#slide”)。toggle()。toggleClass('animated bounceInLeft');


5

带有TweenLite/的 GreenSock动画平台(GSAP)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文档

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


4

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

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

就那么简单。


4

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



3

或者你可以使用

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

4
在回答一个已有十年历史的问题以及其他十四个现有答案时,这将有助于解释您的答案带来了什么新方法,询问该问题时该方法是否有效,或者是否使用了这十年中可用的技术。
詹森·艾勒

1

我使用滚动完成的一个示例(仅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)'});
      }
  });

检查这个例子


1
是的,CSS过渡是当今实现这一目标的最佳方法。
汤姆汤姆

1

如果您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);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.