Jquery基础之----动画篇

一、jQuery中隐藏元素的hide方法
快捷参数：.hide("fast / slow")；
比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。
                         //点击buttom1 直接隐藏
                         $("button:first").click(function() {
                                    $("#a1").hide();
                            });
                     //点击buttom2 执行动画隐藏
                    $("button:last").click(function() {
                                $("#a2").hide({
                                            duration: 3000,
                                            complete: function() {
                                                                alert('执行3000ms动画完毕')
                                                    }
                                        })
                            });
二、jQuery中显示元素的show方法
$('elem').hide(3000).show(3000)：让元素执行3秒的隐藏动画，然后执行3秒的显示动画。
三、jQuery中显示与隐藏切换toggle方法
（1）基本的操作：toggle();
        这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
（2）提供参数：.toggle( [duration ], [complete ] )；
        同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。
（3）直接定位：.toggle(display)；
          直接提供一个参数，指定要改变的元素的最终效果，其实就是确定是使用show还是hide方法
                            if ( display === true ) {
                                              $( "elem" ).show();
                                    } else if ( display === false ) {
                                                          $( "elem" ).hide();
                                                }
四、jQuery中下拉动画slideDown
（1）.slideDown()：用滑动动画显示一个匹配元素；
常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束
            .slideDown( [duration ], [ complete ] )
或者这个duration参数被省略，那么默认使用400 毫秒的延时。
五、jQuery中上卷动画slideUp
（1）最简单的使用：不带参数：$("elem").slideUp();
（2）带参数：.slideUp( [duration ] ,[easing ] ,[complete ] );
                同样可以提供一个时间，然后可以使用一种过渡使用哪种缓冲函数；最后一个动画结束的回调方法。
【注意：因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面。】
六、jQuery中上卷下拉切换slideToggle
jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素。
（1）基本的操作：slideToggle();这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。
（2）提供参数：.slideToggle( [duration ] ,[ complete ] )；同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数。
       // 点击slideToggle上下卷滚切换
        $("button").click(function() {
            $("#a1").slideToggle(3000)
        });
七、jQuery中淡出动画fadeOut
fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果，
.fadeOut( [duration ], [ complete ] )元素时可见的，只不过是将其隐藏了。
八、jQuery中淡入动画fadeIn
（1）.fadeIn( [duration ], [ complete ] )；
    ①duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
    ②元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
九、jQuery中淡入淡出切换fadeToggle
（1）fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。
       常用语法：.fadeToggle( [duration ] ,[ complete ] );
十、jQuery中淡入效果fadeTo
（1）如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？
jQuery提供了fadeTo方法，可以让改变透明度一步到位。
语法：.fadeTo( duration, opacity ,callback)
①duration参数规定时长，②opacity 参数设置不透明度， ③callback 参数是执行的函数名称。
十一、jQuery中toggle与slideToggle以及fadeToggle的比较
①toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性；②slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性；③fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换；
十二、jQuery中动画animate
（1）操作一个元素执行3秒的淡入动画：
                        $(elem).fadeOut(3000);  
                        $(elem).animate({opacity:0},3000);//相对比上面的机比较精确
（2）语法：
            （2-1）.animate( properties ,[ duration ], [ easing ], [ complete ] )
            ①properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。【注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。】
           ②duration时间：动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒；
          ③easing动画运动的算法：jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件；
          ④complete回调：动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发。
                     //④通过toggle参数切换高度，隐藏样式
                        $aaron.animate({
                                    width: "toggle"
                                });
                     //③以动画的方式改变内部字体
                                $aaron.animate({
                                                fontSize: "5em"
                                    }, 2000, function() {
                                        alert("动画 fontSize执行完毕!");
                                });
                 // ②数值的单位默认是px
                            $aaron.animate({
                                            width  :300,
                                            height :300
                                    });
                // ①在现有高度的基础上增加100px
                                $aaron.animate({
                                            width  : "+=100px",
                                             height : "+=100px"
                                });
      （2-2）.animate( properties, options )
                    options参数：
                             ①duration - 设置动画执行的时间；
                             ②easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数；
                             ③step：规定每个动画的每一步完成之后要执行的函数；
                             ④progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念；
                             ⑤complete：动画完成回调；
列出常用的方式：
                            $('#elem').animate({
                                                  width: 'toggle',  
                                                  height: 'toggle'
                                          }, {
                                                duration: 5000,
                                                specialEasing: {
                                                                          width: 'linear',
                                                                          height: 'easeOutBounce'
                                                                        },
                                            complete: function() {
                                                        $(this).after('<div>Animation complete.</div>');
                                                     }
                              });
十三、jQuery中停止动画stop
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止。
语法：
（1）.stop( [clearQueue ], [ jumpToEnd ] )；
（2）.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )；
（3）.stop(); 停止当前动画，点击在暂停处继续开始；
（4）.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行；
（5）.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。
简单的说：参考下面代码：
                    $("#aaron").animate({
                                            height: 300
                                        }, 5000)
                $("#aaron").animate({
                                            width: 300
                                        }, 5000)
                $("#aaron").animate({
                                    opacity: 0.6
                                    }, 2000)
       ①stop()：只会停止第一个动画，第二个第三个继续；（停止当前动画）
       ②stop(true)：停止第一个、第二个和第三个动画；（停止当前执行动画元素的所有动画行为）
       ③stop(true ture)：停止动画，直接跳到第一个动画的最终状态 ；（ 停止当前执行动画元素的所有动画行为，并且直接到达动画最后一帧）
十四、jQuery中each方法的应用
jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集。
语法：
         jQuery.each( object, callback )；
       第一个参数传递的就是一个对象或者数组，第二个是回调函数。（回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。）
jquery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。
十五、jQuery中查找数组中的索引inArray
jQuery封装了inArray()函数判断元素是否存在数组中，JavaScript却没有。
jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
语法：
        jQuery.inArray( value, array ,[ fromIndex ] )；
第一个数是要找的元素，第二个是数组，第三个是开始的位置（相当于索引）；
例如：在数组中查找值是5的索引
       $.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4
十六、jQuery中去空格神器trim方法
jQuery.trim()函数用于去除字符串两端的空白字符；
十七、jQuery中DOM元素的获取get方法
jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到。
语法：
     .get( [index ] )；
【注意：①get方法是获取的dom对象，也就是通过document.getElementById获取的对象；②get方法是从0开始索引】
第二个a元素的查找： $(a).get(1)；
负索引值参数：
           get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1；
同样是找到第二元素，可以传递 $(a).get(-2) 。
十八、jQuery中DOM元素的获取index方法
.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。
语法：参数接受一个jQuery或者dom对象作为查找的条件。
                            .index()
                            .index( selector )
                            .index( element )
①如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置；
②如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置；
③如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1；