从右向右滑动？
我怎么能有一个div从折叠展开（反之亦然），但从右到左这样做？
我所看到的大多数东西总是从左到右。
$("#slide").animate({width:'toggle'},350); 参考： https ： //api.jquery.com/animate/
这可以使用jQueryUI hide / show方法本地实现。 例如。
// 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
用这个：
$('#pollSlider-button').animate({"margin-right": '+=200'});
现场演示
改良版
一些代码已被添加到演示，以防止双重保证金双击： http : //jsfiddle.net/XNnHC/942/
与easing一起使用它;）
http://jsfiddle.net/XNnHC/1591/
-
额外的JavaScript代码已删除。
-
类名称和一些CSS代码已更改
-
增加了function来查找是否展开或折叠
-
改变是否使用缓解效应
-
改变了animation速度
看看使用jQuery UI的 Fiddle上的这个工作示例 。 这是我从左到右使用的解决scheme，但是我已经将其从右向左改变了。
它允许用户快速点击链接，而不会打破可用面板之间的animation。
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; }); });
在小提琴链接获取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>
我这样做了：
var btn_width = btn.width(); btn.width(0); btn.show().animate({width: btn_width}, {duration: 500});
注意，那个节点“btn”应该在animation之前被隐藏，你可能还需要为它设置“position：absolute”。
$(function() { $('.button').click(function() { $(this).toggleClass('active'); $('.yourclass').toggle("slide", {direction: "right"}, 1000); }); });
你可以先定义元素的宽度为0，然后右键点击，然后在你要显示的事件上。
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
就那么简单。
另一个值得一提的库是animate.css 。 它与jQuery非常好，你可以简单地通过切换CSS类来做很多有趣的animation。
喜欢..
$（“＃slide”）。toggle（）。toggleClass（'animated bounceInLeft'）;
使用TweenLite / TweenMax GreenSockanimation平台（GSAP）提供了比jQuery或CSS3过渡更为平滑的定制。 为了使用TweenLite / TweenMax来animationCSS属性，你还需要一个名为“CSSPlugin”的插件。 TweenMax自动包括这一点。
首先，加载TweenMax库：
<script src="ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
或者TweenLite的轻量级版本：
<script src="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>
然后，调用你的animation：
var myObj= document.getElementById("myDiv"); // Syntax: (target, speed, {distance, ease}) TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
您也可以使用IDselect器来调用它：
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
如果您已经加载了jQuery，那么可以使用更高级的宽select器，如包含特定类的所有元素：
// This will parse the selectors using jQuery's engine. TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
有关完整的详细信息，请参阅： TweenLite文档
根据他们的网站： “TweenLite是一个非常快速，轻量级和灵活的animation工具，作为GreenSockanimation平台（GSAP）的基础。”
一个没有jQuery UI的从右到左animation的例子，只是使用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>
我使用滚动（只是HTML，CSS和JS，只是与jQuery库）完成的一个例子。 当向下滚动时，一个button将向左滑动。
此外，我build议你，如果唯一你想要的是这种效果，不要使用jQuery UI，因为它太重（如果你只是想用它）。
$(window).scroll(function(){ if ($(this).scrollTop() > 100) { event.preventDefault(); $(".scrollToTop").css({'transform': 'translate(0px, 0px)'}); } else { $(".scrollToTop").css({'transform': 'translate(40px, 0px)'}); } });
检查这个例子
