jQuery中的show()方法和hide()方法会同时修改元素的多个样式,即宽带、高度和不透明度;fadeOut()方法和fadeIn()方法只会修改元素的不透明度;slideDown()方法和slideUp()方法只会修改元素的高度,这些有时候不能满足需求,所以就要采取一些高级的自定义动画,在jQuery中可以使用animate()方法来自定义动画。
语法:animate(params,speed,callback);
参数:
①params:一个包含样式属性及值的映射,比如{property1 : “value1”,property2 : “value2”,……..};
②speed:速度参数,可选参数;
③callback:在动画完成时执行的函数,可选;
<script type="text/javascript">
$(function () {
$("#panel").click(function () {
//三种动画同时进行
//$(this).animate({ left: "+=500px",height:"+=500px",width:"+=500px"}, 2000);
//三种动画顺序执行
$(this).animate({ left: "+=500px"}, 50);
$(this).animate({ height: "+=500px"}, 50);
$(this).animate({ width: "+=500px" }, 50);
});
});
</script>
链式方式(动画队列):
<script type="text/javascript">
$(function () {
$("#panel").css("opacity", "0.5");
$("#panel").click(function () {
$(this).animate({ left: "400px", height: "400px", opacity: "1" }, 2000)
.animate({ top: "200px", width: "400px" }, 2000)
.fadeOut("slow");
});
});
</script>
动画回调函数(callback):
需要注意的是,css()方法不会加入到动画队列中个,而是立即执行。此时可以使用animate方法的最后一个参数callback;使用回调函数(callback)可以对非动画方法实现队列,只要将css()方法写在某个动画中的回调函数里即可!
例如:
<script type="text/javascript">
$(function () {
$("#panel").css("opacity", "0.5");
$("#panel").click(function () {
$(this).animate({ left: "400px", height: "400px", opacity: "1" }, 2000, function () { $(this).css("border", "5px solid blue"); })
.animate({ top: "200px", width: "400px" }, 2000, function () { $(this).css("background-color", "Green"); })
});
});
</script>
注意:callback回调函数适用于jQuery所有的动画效果方法!!!
停止元素的动画:
方法:stop([clearQueue],[gotoEnd]);
参数:clearQueue:boolean值,表示是否要清空未执行完的动画队列;
gotoEnd:代表是否直接将正在执行的动画跳转到末状态;
这两个参数都是可选参数!!
判断元素是否处于动画状态:
语法:
if (!$("#panel").is(":animated")) {
//如果当前元素(id=panel)没有进行动画,则添加新的动画!
}
延迟动画:
在动画执行的过程中,如果相对动画进行延迟操作,可使用delay()方法;用法如下:
<script type="text/javascript">
$(function () {
$("#panel").css("opacity", "0.5");
$("#panel").click(function () {
$(this).animate({ left: "200px", height: "300px", opacity: "1" }, 2000, function () { $(this).css("border", "5px solid blue"); })
.delay(2000)
.animate({ top: "200px", width: "300px" }, 2000, function () { $(this).css("background-color", "Green"); })
.delay(2000)
.fadeOut("slow");
});
});
</script>
转自博客:https://www.cnblogs.com/xuquantong/archive/2012/10/09/2717436.html