jQuery 从右向左滑动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/596608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide right to left?
提问by Ryan Montgomery
How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left?
我怎样才能让 div 从折叠状态变为展开状态（反之亦然），但从右向左进行？
Most everything I see out there is always left to right.
我在那里看到的大多数东西总是从左到右。
回答by JQGeek
$("#slide").animate({width:'toggle'},350);
Reference: https://api.jquery.com/animate/
回答by EnGassa
This can be achieved natively using the jQueryUI hide/show methods. Eg.
这可以使用 jQueryUI 隐藏/显示方法本地实现。例如。
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Reference: http://docs.jquery.com/UI/Effects/Slide
回答by h0mayun
Use this:
用这个：
$('#pollSlider-button').animate({"margin-right": '+=200'});
Improved version
改良版
Some code has been added to the demo, to prevent double margin on double click: http://jsfiddle.net/XNnHC/942/
演示中添加了一些代码，以防止双击时出现双边距：http: //jsfiddle.net/XNnHC/942/
Use it with easing ;)
轻松使用它;)
http://jsfiddle.net/XNnHC/1591/
http://jsfiddle.net/XNnHC/1591/
Extra JavaScript codes removed.
Class names & some CSS codes changed
Added feature to find if is expanded or collapsed
Changed whether use easing effect or not
Changed animation speed
删除了额外的 JavaScript 代码。
类名和一些 CSS 代码已更改
添加了查找是否展开或折叠的功能
更改是否使用缓动效果
改变动画速度
回答by Erwin Julius
Take a look at this working exampleon Fiddle, which uses jQuery UI. It is a solution I've used originally from left to right, but I've changed it to work from right to left.
看看这个使用jQuery UI 的Fiddle工作示例。这是我最初从左到右使用的解决方案，但我已将其更改为从右到左工作。
It allows user to click on links quickly without breaking the animation among the available panels.
它允许用户快速点击链接，而不会破坏可用面板之间的动画。
The JavaScript code is simple:
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;
});
});
Get HTML and CSS at the Fiddle link.
在 Fiddle 链接中获取 HTML 和 CSS。
Added white background and left-padding just for better effect presentation.
添加白色背景和左填充只是为了更好的效果展示。
回答by Shwet
Use This
用这个
<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>
回答by Hil
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
回答by AbstractVoid
I've done it this way:
我是这样做的：
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Note, that node "btn" should be hidden before animation, and you might also need to set "position: absolute" to it.
请注意，该节点“btn”应在动画之前隐藏，您可能还需要为其设置“位置：绝对”。
回答by Soichi Hayashi
Another worth mentioning library is animate.css. It works great with jQuery, and you can do a lot of interesting animations simply by toggling CSS classs.
另一个值得一提的库是animate.css。它与 jQuery 配合得很好，您只需切换 CSS 类就可以制作许多有趣的动画。
Like..
喜欢..
$("#slide").toggle().toggleClass('animated bounceInLeft');
$("#slide").toggle().toggleClass('animated BounceInLeft');
回答by TetraDev
GreenSock Animation Platform (GSAP) with TweenLite/ TweenMaxprovides much smoother transitions with far greater customization than jQuery or CSS3 transitions. In order to animate CSS properties with TweenLite / TweenMax, you'll also need their plugin called "CSSPlugin". TweenMax includes this automatically.
带有TweenLite/ 的GreenSock 动画平台 (GSAP)TweenMax提供了比 jQuery 或 CSS3 过渡更流畅的过渡和更大的自定义。为了使用 TweenLite / TweenMax 为 CSS 属性设置动画，您还需要名为“CSSPlugin”的插件。TweenMax 会自动包含此内容。
First, load the TweenMax library:
首先，加载 TweenMax 库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
Or the lightweight version, TweenLite:
或者轻量级版本，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>
Then, call your animation:
然后，调用您的动画：
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
You can also call it with an ID selector:
您还可以使用 ID 选择器调用它：
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
If you have jQuery loaded, you can use more advanced broad selectors, like all elements containing a specific class:
如果加载了 jQuery，则可以使用更高级的广泛选择器，例如包含特定类的所有元素：
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
For full details, see: TweenLite Documentation
有关完整详细信息，请参阅： TweenLite 文档
According to their website: "TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP)."
根据他们的网站： “TweenLite 是一种极其快速、轻便且灵活的动画工具，是 GreenSock 动画平台 (GSAP) 的基础。”
回答by fremail
An example of right to left animation without jQuery UI, just with jQuery (any version, see https://api.jquery.com/animate/).
没有 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>