jQuery动画---显示、卷动、淡入淡出

显示和隐藏

show()/hide() 显示和隐藏

动画显示

可以加时间参数，标志显示或者隐藏的快慢，单位为毫秒。还有三个预设的速度：slow、normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。
如果传递的时间不符合格式要求或者为空字符串，那个将采用normal

$(":button:eq(0)").click(function(){    $("div:eq(0)").show(500);});$(":button:eq(1)").click(function(){    $("div:eq(0)").hide(500);});

回调函数

动画执行完毕后，紧接着执行回调函数。这里如果不写time则依然有速度，速度为normal
show(time,fun)

$("div:eq(0)").show(500,function(){    alert("显示完成");});

队列动画

在一个动画执行完后，调用另一个动画，由此实现队列动画。采用递归自动遍历所有需要操作的元素。

$(":button:eq(0)").click(function(){    $("div").first().show(100,function test(){        $(this).next().show(100,test);    });});$(":button").last().click(function(){    $("div").last().hide(100,function test1(){        $("div:visible").last().hide(100,test1);    });});

也可以使用arguments.callee表示匿名函数的引用
arguments.callee的用法参考 js函数

$(":button:eq(0)").click(function(){    $("div").first().show(100,function (){        $(this).next().show(100, arguments.callee);    });});$(":button").last().click(function(){    $("div").last().hide(100,function (){        $("div:visible").last().hide(100, arguments.callee);    });});

toggle()

在show和hide之间自动切换

$(":button:eq(2)").click(function(){    $("div").toggle(200);});

卷动

用法与show/hide类似，具体方法如下：
- slideUp() 向上卷起
- slideDown() 向下展开
- slideToggle() 自动切换

$(":button:eq(0)").click(function(){    $("div").slideUp('slow');});$(":button:eq(1)").click(function(){    $("div").slideDown('slow');});$(":button:eq(2)").click(function(){    $("div").slideToggle('slow');});

淡入淡出

与show类似，具体方法如下：
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 自动切换
- fadeTo() 指定透明度(0-1)

$(":button:eq(0)").click(function(){    $("div").fadeIn('slow');});$(":button:eq(1)").click(function(){    $("div").fadeOut('slow');});$(":button:eq(2)").click(function(){    $("div").fadeToggle('slow');});$(":button:eq(2)").click(function(){    $("div").fadeTo('slow',0.5);});