我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?
我在外面看到的大部分东西都是从左到右的。
当前回答
如果你的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");
如果你的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);
带有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)的基础。”
$("#slide").animate({width:'toggle'},350);
参考:https://api.jquery.com/animate/
用这个:
$('#pollSlider-button').animate({"margin-right": '+=200'});
现场演示
改进版本
演示中添加了一些代码,以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/
轻松使用它;)
http://jsfiddle.net/XNnHC/1591/
删除了额外的JavaScript代码。 类名和一些CSS代码更改 增加了查找是否展开或折叠的功能 改变了是否使用缓和效果 改变动画速度
http://jsfiddle.net/XNnHC/1808/