1、卷动动画：
slideup()----------(卷动)
slidedown()-------(滑动)
slidetoggle()-------(slideUp和 slideDown之间的切换)
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').slideDown(1000)
})
$('button').eq(1).click(function () {
$('div').slideUp(1000)
})
$('button').eq(2).click(function () {
$('div').stop().slideToggle(1000)
})
})
</script>
2、普通动画
show()-------(显示动画)
hide()--------(隐藏动画)
toggle()------(show()和hide()之间的切换)
<script>
$(function(){
$('button').eq(0).click(function () {
$('div').show(1000)
})
})
$(function(){
$('button').eq(1).click(function () {
$('div').hide(1000)
})
})
$(function(){
$('button').eq(2).click(function () {
$('div').toggle(1000)
})
})
</script>
3、自定义动画
animate()------(固定数值)
animate()------(数字自加)
animate()------(设置toggle)
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').animate({
width:300,
height:300
},1000)
})
$('button').eq(1).click(function () {
$('div').animate({
width:'+=100',
height:'+=100'
},1000)
})
$('button').eq(2).click(function () {
$('div').animate({
width:'toggle',
height:'toggle'
},1000)
})
})
</script>
4、淡入淡出
fadein()-------------(淡入)
fadeout()------------(淡出)
fadetoggle()--------(切换)
<script>
$('button').eq(0).click(function () {
$('div').fadeIn(3000)
})
$('button').eq(1).click(function () {
$('div').fadeOut(3000)
})
$('button').eq(2).click(function () {
$('div').fadeToggle(3000)
})
</script>
