上卷（slideUp）和下拉（slideDown） 动画

上卷（slideUp）和下拉（slideDown）

$("#btnSlideUp").click(function(){
    $("#div1").slideUp(2000,function(){
        alert("上滑");
    });
});
$("#btnSlideDown").click(function(){
    $("#div1").slideDown(2000);
});

$("#btnSlideToggle").click(function(){
    $("#div1").slideToggle(2000);
});

 

 

动画

animate()中有三个参数，第一个参数是要改变你的样式，第二个参数是显示的速度（"fast","slow",毫秒数），第三个是回调函数

opacity：不透明度   0完全透明

<button id="start">开始动画</button>
<button id="stop">停止动画</button>

 

$("#start").click(function(){
    $("#div1").animate({height:'300px',opacity:'0.4'},"slow");
    $("#div1").animate({width:'300px',opacity:'0.8'},"slow");
    $("#div1").animate({height:'100px',opacity:'0.4'},"slow");
    $("#div1").animate({width:'100px',opacity:'0.8'},"slow");
});

$("#stop").click(function () {
    $("#div1").stop(true); //停止当前动画及后续动画，false只停当前动画

});