我是这样做的:

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

注意，节点“btn”应该在动画之前隐藏，您可能还需要为它设置“position: absolute”。

如果你的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);

或者你可以用

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

请看这里的例子。

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

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

带有TweenLite / TweenMax的GreenSock动画平台(GSAP)提供了比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)的基础。”

用这个:

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

现场演示

改进版本

演示中添加了一些代码，以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/

轻松使用它;)

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

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

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