1、动画效果
(1)animate()方法
animate()方法用于创建自定义动画。可以使用相对值,也可以使用预定义的值(可以把属性的动画值设置为“slow”、“hide” 或 “toggle”。
语法:
$(selector).animate({left:'250px'});
注意:默认地,所有HTML元素都有一个静态位置,且无法移动。如果想要对位置进行操作,需要把元素的CSS position属性设置为relative、fixed 或 absolute!
如:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
(2)使用队列功能
例一:
$("button").click(function(){
var div=$("#div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
});
例二:
$("button").click(function(){
var div=$("div");
div.animate({left:'1000px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
2、Callback函数
Callback函数在当前动画100%完成之后执行
语法:
$(selector).hide(speed,callback)
callback函数是一个在hide操作完成后执行的函数。
如:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});