动画

动画效果：

基本：

show([s,[e],[fn]])

hide([s,[e],[fn]])

toggle([s],[e],[fn])

 /*基本*/
//行内样式  display
//隐藏  display:none  显示 display:原始值    如果没有原始值，则删除display样式
//带动画的路线是   左上角<->右下角
$(".show").click(function(){
    //$("div").show()
   // $("div").show("slow")  //normal   fast   slow 动画效果
   //$("div").show(1000)  //1000毫秒   带动画的路线是   左上角<->右下角
})
$(".hide").click(function(){
    $("div").hide()
})
$(".toggle").click(function(){
    $("div").toggle()
})

 

滑动：

slideDown([s],[e],[fn])

slideUp([s],[e],[fn])

slideToggle([s],[e],[fn])

/*滑动*/
//行内样式  height
//动画路线  上<->下
$(".slideDown").click(function(){
    $("div").slideDown()
    })
$(".slideUp").click(function(){
    $("div").slideUp()
})
$(".slideToggle").click(function(){
  //  $("div").slideToggle(3000)
  //  $("div").stop().slideToggle(3000)//删除所有排队的动画，在最后一次动画基础上，继续新动画
  //  $("div").finish().slideToggle(3000) //删除所有排队的动画，完成所有动画，开始新动画
})

 

淡入淡出：

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

fadeTo([[s],o,[e],[fn]])

fadeToggle([s,[e],[fn]])

/*淡入淡出*/
//行内样式  opacity透明度  0<->1
$(".fadeIn").click(function(){
    $("div").fadeIn()
    })
$(".fadeOut").click(function(){
    $("div").fadeOut(2000)
})
$(".fadeToggle").click(function(){
    $("div").fadeToggle()
})
$(".fadeTo").click(function(){
    $("div").fadeTo("normal",0.3)
})

　　

自定义：

animate(p,[s],[e],[fn])

stop([c],[j])

delay(d,[q])

finish([queue])

设置:

jQuery.fx.off

 

 

另外

/*animate 同时执行多个*/
$(".animate").click(function(){
  //  $("div").animate({width:"400px"},2000)
 // $("div").animate({width:"400px",height:"400px",opacity:0.3},2000) //同时执行
 $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},2000)  //宽 高   每点击一次加40px
})