jQuery学习：内置动画 淡出/淡入 展开/收缩 显示/隐藏

fadeOut():慢慢淡出  改变透明度 opcity 1--0  然后显示display:none

fadeOut(速度，)

速度的取值：slow normal fast 1000ms 取值
 

var $div1=$('.div1')

$('#btn1').click(function(){

$div1.fadeOut(1000)

});

fadeIn：淡入 display 0 --1 display block

$('#btn2').click(function(){

$div1.fadeIn(1000)

});

切换淡入淡出效果  

$('#btn3').click(function(){

$div1.fadeToggle()

});

可以有回调函数 对动画完成做出指示

var $div1=$('.div1')

$('#btn1').click(function(){

$div1.fadeOut(1000,function(){

alert('动画完成了');

});

});

$('#btn2').click(function(){

$div1.fadeIn(1000);

});

$('#btn3').click(function(){

$div1.fadeToggle()

});

慢慢收缩：slideUp 向上收缩 主要变化的是当前元素变化的高度

慢慢展开：slideDown 向下展开

收缩展开切换：

$('#btn4').click(function(){

$div1.slideUp();

});

$('#btn5').click(function(){

$div1.slideDown();

});

$('#btn6').click(function(){

$div1.slideToggle()

});

显示隐藏：默认没有动画--------这三个属性是东湖改变的有透明度 宽 高 ---加上时间就是动画

show():（不）带动画的显示

hide():（不）带动画的隐藏

toggle:（不）带动画的切换显示/隐藏

$('#btn7').click(function(){

$div1.show();

});

$('#btn8').click(function(){

$div1.show(1000);

});

$('#btn9').click(function(){

$div1.hide(1000)

});

$('#btn10').click(function(){

$div1.toggle()

});