jQuery动画1

                           jQuery动画1

一、动画基础的隐藏（hide）与显示（show）
1、在jQuery中把元素隐藏起来的方法是.hide()方法。
2、我们让页面上的元素不可见的方法有两种，分别是：
（1）可以通过在css中设置display的属性为none，这样的直接修改是静态布局。
（2）但是在代码执行时，我们是需要通过js来控制元素的style（样式）属性的，因此jQuery为我们提供了.hide()的快捷方法，这是动态的去修改。
3、它的使用方法是 $ elem.hide();表达式是hide([speed,[easing],[fn]])。
4、hide方法具有三种参数，其中：
（1）参数speed是三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；
（2）参数easing是(Optional)用来指定切换效果，它的默认值是”swing”，可用参数”linear”；
（3）参数fn是在动画完成时执行的函数，每个元素执行一次。
5、有隐藏就会有显示，而在jQuery中把元素显示出来的方法是.show()方法。
6、在css中display有把元素隐藏起来的none属性，那么它同样的也有把元素显示出来的block属性，所以jQuery同样提供了与.hide()方法相反的.show()方法。
7、.show()方法的使用几乎与hide方法是一致的，但hide是让元素从显示到隐藏，而show则是相反，它让元素从隐藏到显示。
8、show方法与hide方法是一对互斥的方法。在通常情况下，我们对元素进行显示、隐藏的互斥切换时，是需要先判断元素的display状态，然后再调用其对应的处理方法的。例如：对显示的元素进行切换时，我们需要调用hide，反之亦然。
7、但对于把元素由可见的变成不可见的或不可见的变成可见的的操作行为，jQuery为我们提供了一个更便捷的方法；那就是用来切换显示或隐藏匹配元素的.toggle()方法。
8、更确切的说.toggle()方法是一个用来绑定两个或多个事件处理器函数并且响应选中元素的轮流点击(click)事件的方法。即在一对互斥方法之间切换的效果。例如：.toggle()方法点击一次的作用是隐藏的话，那么再点击一次它的作用就变成了显示。
9、它的表达式是：toggle([speed],[easing],[fn])；在它的表达式中，我们可以知道它有三个参数，其中：
（1）参数speed是隐藏或显示效果的速度。它的默认数值是 “0”毫秒。可能的值是：slow，normal，fast；
（2）参数easing是(Optional)用来指定切换效果，它的默认值是”swing”，可用参数”linear”；
（3）参数fn是在动画完成时执行的函数，每个元素执行一次。
二、上卷（slideDown）下拉（slideUp）动画
1、对于隐藏的元素，我们在将其显示出来的过程中，可以对其进行一些改变，从而让其具有动画效果。
2、对此，我们已经学习了一个show方法，它在显示的过程中也是可以有动画的；但是.show()方法会匹配元素的宽度，高度，以及不透明度，且同时进行动画操作。因此，.show()方法就具有了局限性。
3、而现在我们将要学习一个新的显示方法，它只针对调整元素高度，那就是slideDown方法。它的表达式是slideDown([speed],[easing],[fn])。
4、slideDown方法的作用是通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
5、既然有了从隐藏到显示的slideDown方法，那么也会有从显示到隐藏的slideUp方法，slideUp方法的表达式是slideUp([speed],[easing],[fn])。
6、slideUp方法的作用是通过高度变化（向上减小）来动态地隐藏所有匹配的元素，但是在隐藏完成后可选地触发一个回调函数。
7、slideDown方法与slideUp方法是一对相反（互斥）的方法。它们可以让匹配的元素用“滑动”的方式相对应的去隐藏或显示。当我们需要对元素进行上卷下拉效果的切换时，可以使用jQuery提供的一个便捷方法slideToggle方法。
8、slideToggle方法的表达式是slideToggle([speed],[easing],[fn])。它是用滑动动画显示或隐藏一个匹配元素的方法。
9、slideToggle方法是通过高度变化来切换匹配元素的可见性的，并且会在切换完成后可选地触发一个回调函数的方法。slideToggle方法的动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
10、我们要注意一下，在jQuery 1.3中，上下的内边距（padding）和外边距（margin）也会有动画，效果更流畅。
11、slideDown方法和slideUp方法以及slideToggle方法都具有这三种参数，其中：
（1）参数speed是三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或是表示动画时长的毫秒数值(如：1000)；
（2）参数easing是(Optional)用来指定切换效果，它的默认值是”swing”，可用参数是”linear”；
（3）参数fn是在动画完成时执行的函数，每个元素执行一次。
12、slideDown方法和slideUp方法以及slideToggle方法的使用方法是：
$ (elem).click(function(){
$ (elem).slideDown或slideUp或slideToggle();
});
三、淡入（fadeIn）淡出（fadeOut）动画
1、如果我们要让元素在页面上不可见，常用的办法是通过设置样式的display的属性为none。但除此之外，还有一些类似的办法可以达到这个目的。例如通过改变透明度的一个方法，当我们把元素透明度设置为0时，就可以让元素不可见了。
2、透明度的参数是0到1之间的值，我们通过改变这个值，可以让元素具有一个透明度的效果。例如常见的淡入淡出动画。
3、fadeOut()函数表达式是fadeOut([speed],[easing],[fn])。它的作用是用来隐藏所有匹配的元素，并带有淡出的过渡动画效果。所谓“淡出”，即逐渐隐藏至不可见。当元素是隐藏状态时，不对其作任何改变；当元素是可见的，则将其隐藏起来。
4、fadeIn()函数表达式是fadeIn([speed],[easing],[fn])。它的作用是用于显示所有匹配的元素，并带有淡入的过渡动画效果。所谓“淡入”，即从逐渐到完全显示出来。当元素是可见状态时，不对其作任何改变；当元素是不可见的，则将其显示出来。
5、淡入淡出的切换方法是fadeToggle()。fadeToggle()函数用于切换所有匹配的元素，并带有淡入或淡出的过渡动画效果。
6、fadeToggle切换fadeOut与fadeIn效果，所谓“切换”，即如果元素当前是可见的，则将其隐藏（淡出）；如果元素当前是不可见的，则将其显示（淡入）。我们之前学过的toggle、slideToggle 也是类似的处理方式。
7、我们要知道的是淡入淡出动画只调整元素的不透明度，其余属性是没有变化的。参数说明：
（1）speed参数是三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或者是表示动画时长的毫秒数值(如：1000)；
（2）easing参数是(Optional) 用来指定切换效果，默认值是”swing”，可用参数为”linear”；
（3）fn参数是在动画完成时执行的函数，每个元素都需执行一次。
8、淡入（fadeIn）与淡出（fadeOut）都是通过修改元素样式的opacity属性来达到目的的，它们都有个共同的特点，即变化的区间不是0，就是1。但fadeIn()方法是以淡入效果来显示内容的，所以opacity是0到1；而 fadeOut()方法是以淡出效果来隐藏内容的，opacity是1到0。
9、那么如果我们要让元素保持动画效果去执行opacity 等于 0.5的效果时，又该如何处理呢？
如果不考虑CSS3，只用JS实现的话，基本是通过定时器，在设定的时间内一点点的去修改opacity的值，使其最终为0.5，但这原理虽说简单，可实际操作却很繁琐；总不如一键设置那么舒服。
10、为此jQuery提供了一个fadeTo方法，可以让透明度的改变一步到位。它的表达式是fadeTo([[speed],opacity,[easing],[fn]])。其参数说明分别是：
（1）speed参数是三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或者是表示动画时长的毫秒数值(如：1000)；
（2）opacity参数是一个0至1之间表示透明度的数字；
（3）easing参数是(Optional) 用来指定切换效果，默认值是”swing”，可用参数为”linear”；
（4）fn参数是在动画完成时执行的函数，每个元素都需执行一次。
11、我们对元素的显示与隐藏的操作方法可以有以下几种：
（1）改变样式display为none或show/hide；
（2）设置位置高度为0或sildeDown/sildeUp；
（3）设置透明度为0或fadeIn/fadeOut。
它们都能达到目的，并且针对这样的处理，jQuery都提供了各自的方法（“或”后面的方法）。除此之外，jQuery还引入了toggle、sildeToggle以及fadeToggle的切换方法。
12、toggle方法与slideToggle方法以及fadeToggle方法大体上的比较（区别）：
（1）toggle是切换显示与隐藏效果；
（2）sildeToggle是切换上卷下拉效果；
（3）fadeToggle是切换淡入淡出效果。
13、当然更多的还是细节上的不同:
（1）toggle方法的动态效果为从右至左，是横向的动作。因为Toggle方法是通过display来判断切换所有匹配元素的可见性的；
（2）slideToggle方法的动态效果是从下至上的，是竖向的动作。因为slideToggle 方法是通过高度变化来切换所有匹配元素的可见性的。
(3) fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。当元素是淡出显示的时候，fadeToggle() 会使用淡入效果显示它们。当元素是淡入显示的时候，fadeToggle() 会使用淡出效果显示它们。需要注意的是隐藏的元素不会被完全显示，但它同时也不再影响页面的布局。