<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div>动画！</div>
先将div进行绝对定位，然后使用animate()中的-=和+=分别实现相对左移和相对右移。
animate()方法还有另外一种形式，如下所示：
animate(params,options)
其中，params与第一种形式完全相同，options为动画可选参数列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback与第一种形式完全一样，queue为布尔值，表示当有多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false
如下例子，展示了animate()第二种用法。
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行，然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" value="Block1动画">
<input type="button" value="Block2动画">
<input type="button" value="同时动画">
<input type="button" value="重置">
<div>Block1</div>
<div>Block2</div>
以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。