一、hide()、show()、toggle()

//1.hide():在HTML文档中，为一个元素调用hide()方法会将该元素的display

//样式改为none，代码功能同css("display","none")。当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。

jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局

//2.show():将元素的display样式改为先前的显示状态

//hide() 和 show() 可以接收两个参数

//第一个 动画的时间（可以是具体的数值，也可以是'fast' 和 'slow'，分别代表200和600毫秒的延时）

//第二个 动画完成的回调函数

//以上两个方法在不带任何参数的情况下，作用是立即隐藏或显示匹配的元素，不会有任何动画，

//可以通过制定速度参数使元素动起来

//以上两个方法会同时减少(增大)内容的高度、宽度和不透明度。

$('elem').hide(3000).show(3000)   让元素执行3秒的隐藏动画，然后执行3秒的显示动画。

show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置

如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

//3.toggle():切换元素的可见状态，如果元素是可见的，则切换为隐藏，如果元素是隐藏的，则切换为可见的

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法

//这种写法两个方法会依次被执行，也可以单个使用额

$(document).on("click", function() {

$("#box").hide(2000,function(){

         $("#box").css({

               left:300,

              top:300,

        })

});

$("#box").show(2000,function(){

alert("亲亲的，我来了")

});

//这两个参数可以根据需要决定是否添加

})

//两个方法同时存在但是分开执行的方法，需要bol值判断

// var bol = true;

//点击文档，切换box的出现和消失

$(document).on("click", function() {

if (bol) {

$("#box").hide(500, function() {

alert("隐藏了");

});

bol = false;

} else {

$("#box").show(500, function() {

alert("出现了");

});

bol = true;

}

});

二、fadeIn()、fadeOut()、fadeTo()、fadeToggle()

/*fadeIn(),fadeOut():只改变元素的透明度，fadeOut()会在指定的一段时间内

* 降低元素的不透明度，直到元素完全消失，函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果.所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。所有匹配的元素的高度和宽度不会发生变化。

* fadeIn()则相反，用于显示所有匹配的元素，并带有淡入的过渡动画效果

淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%。

如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

* fadeTo()把不透明度以渐近的方式调整到指定的值(0-1之间)

* 三个参数,执行时间(时间可以填数值，也可以天单词"slow"和"fast") 不透明度目标值 完成之后的回调函数

必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

* fadeToggle()切换fadeIn(),fadeOut()，通过透明度来切换元素的可见性.

所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时

var bol = true;

$(document).on("click", function() {

// if (bol) {

// //不透明度变为0

// $("#box").fadeOut(1000, function() {

// console.log("消失了");

// })

// } else {

// //不透明度变为设置的不透明度

// $("#box").fadeIn(1000, function() {

// console.log("显示了");

// })

// }

// bol = !bol;

//三个参数

//执行时间 不透明度目标值 完成之后的回调函数

// $("#box").fadeTo(1000, 0.2, function() {

// alert("变化完成");

// })

//切换 out 和 in

$("#box").fadeToggle(1000);

})

三、slideDown()、slideUp()、slideToggle()

.slideDown()：用滑动动画显示一个匹配元素

.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式.下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none

持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。

如果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次

/*slideDown(),slideUp():只会改变元素的高度。如果一个元素的display属性为

* none，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法

* 正好相反，元素由下至上缩短隐藏

这个使用的含义就是：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了

因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意

* slideToggle():通过高度变化来切换匹配元素的可见性，也可以给定事件和回调函数

这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。

同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数

同时也提供了时间的快速定义，字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时

display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值.当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局

// $(document).on("click", function() {

// console.log("哈哈");

//slideDown() 从无到有，从上往下的出现

//slideUp()从有到无，从下往上的消失

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// });

// var bol = true;

// $(document).on("click", function() {

// if(bol) {

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// } else {

// $("#box").slideDown(1000, function() {

// alert("b");

// });

// }

// bol = !bol;

// })

$(document).on("click", function() {

$("#box").slideToggle();

});

四、animate动画

语法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )

.animate( properties, options )

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只用动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用。

.animate({

     left: 50,

     width: '50px'

     opacity: 'show',

     fontSize: "10em",

}, 500);

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({

     left: '+=50px'

}, "slow");

// 在现有高度的基础上增加100px

$aaron.animate({

     width  : "+=100px",

     height : "+=100px",

});

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。

.animate({

     width: "toggle",//改变宽，从宽上面改变

});

$("#box").animate({

    height:"toggle",//改变高，从高上面改变

},3000)

动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。

easing动画运动的算法

jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件

complete回调

动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

参数

duration - 设置动画执行的时间

easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数

step：规定每个动画的每一步完成之后要执行的函数

progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

complete：动画完成回调

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次