JQuery动画

用JavaScript实现动画要写很复杂的代码，而JQuery是已经封装好的，所以使用非常的方便

$(document).ready(function(){     //这一句是为了防止页面还没加载完就运行js
       $("#div").hide( ) 
})

show / hide

$('#test').                        //这是JQuery的语句，括号里是id就#，class就.

$('#test').hide(3000)          //选择id为test的目标，在3秒钟内逐渐消失

$('#test').show('slow')         //在0.6秒钟内逐渐显示

$('#test').toggle('slow')       //根据当前的状态切换显示

第二个括号是行为持续的时间的意思，1000为1s，也可以使用英文'slow'之类，不够要加上引号

slideUp / slideDown

$('#test').slideUp(3000)           //在3秒钟内逐渐向上消失

$('#test').slideDown(3000)           //在3秒钟内逐渐向下展开

$('#test').slideToggle(3000)          //根据当前状态决定向上消失还是向下展开

fadeIn / fadeOut

$('#test-fade').fadeOut('slow')       //在0.6秒内淡出,既不透明度变0

$('#test-fade').fadeIn('slow')        //在0.6秒内淡入,既不透明度变1

$('#test-fade').fadeToggle('slow')         //根据当前状态切换

自定义动画animate

需要传入的参数就是DOM元素最终的CSS状态和时间

结构：
$('#test-animate').animate({
             //属性                             
        },时间,callback());           //callback是个回调函数，动画结束时就会被调用，也可以不用

$('#test-animate').animate({            //在3秒内，不透明度变为0.25，宽和高都变为256px
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000,function () {
    console.log('动画已结束');
    // 恢复至初始状态:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});