一,show()和hide()方法
show()方法中传人参数slow,normal,fast,可以指定数字,表示显示速度
hide()方法中传人参数slow,normal,fast,可以指定数字,表示消失速度
二,fadeIn()和fadeOut()方法
指定不透明度
fadeOut(),在指定的时间内,减低元素的不透明度,直到完全消失
fadeIn(),在指定的时间内,增加元素的不透明度,直到完全显现
三,slideUp()和slideDown()方法
改变元素的高度
slideDown(),对于display为none的元素,由上至下的延伸显示
slideUp(),对于display为none的元素,由下至上的延伸显示
四,自定义动画animate()
语法结构,animate(params,speed,callback)
params:包含样式属性及值的映射{property:"value1",property:"value2"}
speed:速度参数,可选
callback:在动画完成时执行的函数,可选
1,自定义简单动画
animate({left:"500px"},300);移动到指定位置
2,累加累减动画
animate({left:"+=500px"},400);当前位置累加500px
3,多重动画
animate({left:"400px",right:"400px"},500);
4,综合动画
$(this).animate({left:"400px",height:"400px",opacity:"1"},3000).animate({top:"200px","200px"},2000).fadeout("slow");
五,动画回调函数
动画执行结束后执行的函数
$(this).animate({},100,function(){$(this).css("border","5px solid blue");});
六,停止动画和判断是否处于动画状态
1,停止动画
stop([clearQueue].[gotoEnd]);立即停止当前正在进行的动画
clearQueue为布尔值,表示是否清空未执行的动画队列
gotoEnd为布尔值,表示是否直接将正在执行的动画跳转到末状态
2,判断是否处于动画状态
is(":animated")
if(!$(element).is(":animated")){//如果当前没有处于动画状态}
3,延迟动画
delay()方法,传人延迟时间
$(this).animate({left:"400px",height:"200px"},200).delay(1000);
七,其他动画方法
1,toggle()方法,切换元素的可见状态
$(this).next().toggle();
2,slideToggle()方法
通过高度变化来切换匹配元素的可见性
$(this).next().slideToggle()
3,fadeTo()方法
通过切换元素的不透明度以渐进方式调整到指定值
$(this).next().fadeTo(600,0.2)
4,fadeToggle()方法
通过不透明变化来切换匹配元素的可见性
$(this).next().fadeToggle()
八,动画方法概况
1,一组元素上的动画效果
在一个animate()方法中应用多个属性,动画是同时发生的
以链式的写法应用动画,是按顺序执行的
2,多组元素上的动画效果
默认情况都是同时发生的
以回调的形式应用动画方式时(动画的回调函数和queue方法的回调函数),动画按回调顺序发生的