如何让div从折叠到扩展（反之亦然），但从右到左进行？
我看到的大多数东西总是从左到右。
$("#slide").animate({width:'toggle'},350);
一个没有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>另一个值得一提的图书馆是animate.css。它适用于jQuery，你可以通过切换CSS类来做很多有趣的动画。
喜欢..
$（“＃slide”）。toggle（）。toggleClass（'animated bounceInLeft'）;
我使用滚动（只是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)'});
}
});
如果您的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);
这可以使用jQueryUI hide / show方法本机实现。例如。
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
用这个：
$('#pollSlider-button').animate({"margin-right": '+=200'});
改良版
一些代码已添加到演示中，以防止双击时出现双倍边距：http://jsfiddle.net/XNnHC/942/
使用它与缓和;）
http://jsfiddle.net/XNnHC/1591/
看一下使用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。
添加白色背景和左边填充只是为了更好的效果演示。
用这个
<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>
$(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”。
您可以首先将元素的宽度定义为0，向右浮动，然后在您要显示它的事件上定义..它就像
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
就那么简单。
与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）的基础。”