jQuery封装的动画

jQuery封装的动画

jquery中的固定动画

show():相当于display:block 可以加参数，   参数1 为时间 参数2 为动画完成
hide():相当于display:none      参数1 为时间 参数2 为动画完成

	$("#btn").click(function(){
        $(".block").hide(1000,function(){
            alert(1)
        })
    })//隐藏
    
    $("#btn1").click(function(){
        $(".block").show(1000,function(){
            alert(2)
        })
    })//显示

toggle() show和hide结合版

$("#btn1").click(function(){
        $(".block").toggle(1000,function(){
            alert(2)
        })
    })

滑动效果

	$("#btn").click(function(){
        $(".block").slideUp(1000,function(){
            alert(1)
        })
	 })//上滑
 
    $("#btn1").click(function(){
        $(".block").slideDown(1000,function(){
            alert(1)
        })
	 })//下滑

上滑和下滑结合版

	$("#btn").click(function(){
        $(".block").slideToggle(1000,function(){
            alert(1)
        })
	 })

淡入淡出动画

	$("#btn").click(function(){
        $(".block").fadeOut(1000,function(){    //淡出
            alert(1)
        })
    })
    
    $("#btn1").click(function(){
        $(".block").fadeIn(1000,function(){   //淡入
            alert(1)
        })
    })

透明度动画

$("#btn").click(function(){
        $(".block").fadeOut(1000,function(){
            alert(1)
        })
        $(".block").fadeTo(1000,0.5,function(){
            alert(3)//透明度  时间，透明度，动画完成时
        })
    })

自定义动画
delay() 动画的延迟 stop() 停止当前运行的动画

$("#start").click(function(){
        $(".block").delay(1000).animate({
            marginLeft:"700px",
            opacity:0
        },1000,function(){
            //完成

        }).delay(1000).animate({
            marginLeft:"0",
            opacity:1
        },1000)
    });
    $("#stop").click(function(){
        $("block").stop();
    })