显示与隐藏:
show([speed]);
显示
show(speed, [callback]);
hidden([speed]); 隐藏
hidden([speed]); 隐藏
hidden(speed, [callback]);
toggle(); 切换
toggle(switch);
toggle(speed, [callback]);
注:callback回调函数都是在动画执行完毕后执行的方法。
滑动:
slideDown(); 滑下
slideDown(speed, [callback]);
slideDown(speed, [callback]);
slideUp();
滑上
slideUp(speed, [callback]);
slideUp(speed, [callback]);
无论是slideDown()还是SlideUp()方法,他们的动画效果仅是减小或增加元素的告诉,同时,如果元素有margin或padding值,这些属性也会以动画效果一起发生改变。
slideToggle(); 自动判断滑上滑下
slideToggle(speed, [callback]);
淡入淡出:
fadeIn(); 淡入,改变元素的所有显示属性
fadeIn(speed, [callback]);
fadeIn(speed, [callback]);
fadeOut(); 淡出
fadeOut(speed, [callback]);
fadeOut(speed, [callback]);
fadeTo(); 改变元素透明度切换元素显示状态,其透明度从0.0到1.0淡出或从1.0到0.0淡入
fadeTo(speed, opacity, [callback]); 到指定透明度值,opacity取值为0.0~1.0
自定义动画:
animate(params, [duration], [easing], [callback]);
params表示用于制作动画效果的属性样式和值得集合。
可选项duration表示三种默认速度字符“slow”、"normal"、"fast"或自定义数字。
可选项easing为动画插件使用,用于控制动画的表现效果,通常有"linear"、"swing"等字符值。
可选项callback为动画完成后执行的回调函数。
例:
$("#myDiv").click(function(){
$(this).animate({width:"20px",height:"20px"}, 2000, function(){...});
});
队列中的动画:
$("#myDiv").click(function(){
$(this).animate({height:100}, 2000).animate({width:100}, 2000).animate({height:50},2000).animate({height:50}, 2000);
});
动画将依次完成一系列动画。
动画停止和延时:
stop();
stop([clearQueue], [gotoEnd]);
该方法的功能是停止所选元素中正在执行的动画,其中可选参数[clearQueue]是一个bool值,表示是否停止正在执行的动画,另外一个可选参数[gotoEnd]也是一个bool值,表示是否立即完成正在执行的动画。
delay();
delay(duration, [queueName]);
该方法的功能是设置一个延时值来推迟后续队列中动画的执行,其中参数duration为延时的时间值,单位为毫秒。
可选参数[queueName]表示队列名词,即动画队列。