jQuery学习笔记（五）

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");
});