13.JQ动画基础

一.jq动画基础

1.显示和隐藏 (默认无动画,当添加参数的时候会有动画)

show()/hide() 显示和隐藏,括号内可以传递参数,fase,normal,slow (200ms,400ms,600ms)

$('#d1').click(function(){
$('div').hide('fast')
})

toggle() 根据当前状态显示或隐藏(当有这个的时候隐藏,无的时候显示)

2.滑动

slideDown():向下展开

slideUp():向上拉收起来

3.渐变

fadeIn(): 淡入

fadeOut(): 浅出

4.自定义动画

animate(样式,时间,结束后的状态)

$('#d1').click(function(){
$('div').animate({
'width':'300px',
'height':'300px'
},3000,function(){
$('div').css({
'width':'100px',
'height':'100px'
})
})
})

5.stop() 停止动画

stop(true,true)可以带参数
参数1:是否立即停止动画,true为立即停止
参数2:执行完当前动画,再停止其他动画