显示和隐藏

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的用法参考

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