jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
-
显示隐藏动画
隐藏 hide()
显示 show()
显示/隐藏 toggle(
例:
$("#testhide").click(function() {
// 动画效果
$("#first").hide("slow");
});
$("#testshow").click(function() {
// 动画效果
$("#first").show("slow");
});
效果:
-
显示上滑下滑动画
例:
$("#testslideup").click(function() {
// 动画效果
$("#first").slideUp("slow");
});
$("#testslidedown").click(function() {
// 动画效果
$("#first").slideDown("slow");
});
$("#testslidetoggle").click(function() {
// 动画效果
$("#first").slideToggle("slow");
});
效果:
-
显示淡入淡出动画
例:
$("#testfadein").click(function() {
// 动画效果
$("#first").fadeIn("slow");
});
$("#testfadeout").click(function() {
// 动画效果
$("#first").fadeOut("slow");
});
$("#testfadetoggle").click(function() {
// 动画效果
$("#first").fadeToggle("slow");
});
$("#testanimate").click(function() {
// 动画效果
$("#first").animate({
fontSize: "12px"
}, "slow");
});
效果: