1、动画基础隐藏和显示（show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置）
（1）隐藏元素的hide方法
快捷参数：
.hide("fast / slow") 'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏
方法一 <script type="text/javascript"> //点击buttom1 执行动画隐藏 $("button:first").click(function() { $("#a2").hide({ duration: 3000, complete: function() { alert('执行3000ms动画完毕') } }) }); </script> 方法二 <script type="text/javascript"> //点击buttom2 执行动画隐藏 $("button:last").click(function() { $("#a1").hide(3000,function(){ alert('执行3000ms动画完毕') }) }); </script>
（2）显示元素的hide方法
hide-show 直接hide-show动画 <script type="text/javascript"> //点击button //执行3秒隐藏 //执行3秒显示 $("button").click(function() { $("#a1").hide(3000).show(3000) }); </script>
（3）显示与隐藏切换toggle方法
//.left .right 为两个div块 <script type="text/javascript"> $("button:first").click(function() { $(".left").toggle(3000) }); </script> <script type="text/javascript"> $("button:last").click(function() { $(".right").toggle(3000) }); </script>
2、上卷下拉效果
（1）下拉动画slideDown （ slideDown(fast) slideDown(slow) ）
基本操作：$("ele").slideDown()
执行回调：$("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动作.... });
（2）上卷动画slideUp（用法同slideDown一样）
（3）上卷下拉切换slideToggle
点击slideToggle上下卷滚切换 <script type="text/javascript"> //点击button //执行3秒隐藏 //执行3秒显示 $("button:last").click(function() { $("#a1").slideToggle('fast',function(){ alert('动画执行结束') }) }); </script>
3、淡入淡出效果（淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，变化的区间要么是0，要么是1）
（1）淡出动画fadeOut（fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果）
.fadeOut("slow / fast"); / .fadeOut(1000); / .fadeOut(1000,"linear"); （这里的linear是指动画的行进速度方法（easing），顾名思义就是淡出的速度保持恒定的线性速度。而jQuery 核心默认的easing为swing,行进速度在动画开始和结束时比在动画中间时稍慢。）
.fadeOut(2000, function () { });
.fadeOut( { duration: 1000 });
（2）淡入动画fadeIn（fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果）
（用法与fadeOut一致）
（3）淡入淡出切换fadeToggle（fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果）
（4）淡入效果fadeTo（让元素保持动画效果，执行opacity 不为0或1时的效果）
测试文字透明度效果
测试测试
透明度的设置效果： fadeTo( "slow" ,0.5 )fadeTo( 1000 ,0.2 )fadeTo( 1000 ,0.9 ,complete) <script type="text/javascript"> //【切换显示/隐藏】按钮 $("#a").click(function() { var v = $("#animation").val(); if (v == "1") { $("p").fadeTo("slow", 0.5); } else if (v == "2") { $("p").fadeTo(1000, 0.2); } else if (v == "3") { $("p").fadeTo(1000, 0.9, function() { alert('完成') }); } }); </script>4、动画切换的比较
toggle与slideToggle和fadeToggle的比较
（1）toggle、sildeToggle以及fadeToggle的区别：
toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果
（2）操作元素的显示和隐藏可以有几种方法。例如：
改变样式display为none
设置位置高度为0
设置透明度为0
（3）toggle与slideToggle细节区别：
toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
5、自定义动画
（1）动画animate
a、所有用于动画的属性必须是数字的，除非另有说明；
b、注意属性值的单位
.animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500);
c、每个属性能使用'show', 'hide', 和 'toggle'
//通过toggle参数切换高度 .animate({ width: "toggle" });
d、提供一个以 += 或 -= 开始的值
//在现有高度上增加50px .animate({ height: '+=50px' }, "slow");
e、CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
f、options参数duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调
$('#elem').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after(' Animation complete. '); } });
（2）停止动画stop
a、stop的几个函数
.stop(); 停止当前动画，点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法，当调用.stop()的时候，队列中的下一个动画立即开始。
.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值
$("#aaron").animate({ height: 300 }, 5000) $("#aaron").animate({ width: 300 }, 5000) $("#aaron").animate({ opacity: 0.6 }, 2000)6、jQuery核心
（1）each方法的应用
来处理对象和数组的遍历（回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。）
jQuery.each ( array, callback ) （jQuery.each == $.each）
jQuery.each ( object, callback )
（2）查找数组中的索引inArray（用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。）
jQuery.inArray ( value, array , [ fromIndex ] )
如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于（或大于）-1 来判断
（3）去空格神器trim方法（jQuery.trim()函数用于去除字符串两端的空白字符）
（4）DOM元素的get方法
get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引（所以第二个a元素的查找： $(a).get(1)）
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1（5）DOM元素的index方法
如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
通过传递dom查找 $(" li ").index(document.getElementById(" test5 ")
通过传递jQuery对象查找 $(" li ").index($(" #test5 "))
