jQuery学习手记 动画篇

一、 隐藏和显示

1. hide()方法 隐藏元素

2. show()方法 显示元素

3. toggle()方法 显示与隐藏切换

二、 上卷下拉效果

1. 下拉动画slideDown
   具体使用：
   $("ele").slideDown(1000, function() {
   //等待动画执行1秒后,执行别的动作....
   });

2. 上卷动画slideUp
   例子：
   $("button:last").click(function() {
   $("#a2").slideUp(3000,function(){
   alert('动画执行结束')
   })
   });
3. 上卷下拉切换slideToggle
   提供参数：.slideToggle( [duration ] ,[ complete ] )
   同时也提供了时间的快速定义，字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时
   slideToggle("fast")
   slideToggle("slow")

三、 淡入淡出效果

1. 淡出动画fadeOut
   .fadeOut( [duration ], [ complete ] )// complete为动画结束后执行的函数

2. 淡入动画fadeIn
   .fadeIn( [duration ], [ complete ] )
    元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
    淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
    如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

3. 淡出切换fadeToggle
   .fadeToggle( [duration ] ,[ complete ] )

4. 淡入效果fadeTo 透明度到一定的值
   .fadeTo( duration, opacity ,callback)

四、 动画切换的比较
操作元素的显示和隐藏可以有几种方法。
例如：
 改变样式display为none
 设置位置高度为0
 设置透明度为0
都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法
toggle、sildeToggle以及fadeToggle的区别：
 toggle：切换显示与隐藏效果
 sildeToggle：切换上下拉卷滚效果
 fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：
 toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
 slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法
 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

五、 自定义动画

1. 动画animate()
   操作一个元素执行3秒的淡入动画，以下两种方法均可实现。
   $(elem).fadeOut(3000)
   $(elem).animate({
   opacity:0
   },3000)
   语法：.animate( properties ,[ duration ], [ easing ], [ complete ] )
   properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的。
   CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
   属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用
   除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
   如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的
   .animate({
   left: '+=50px'
   }, "slow");
   duration时间：动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。
   easing动画运动的算法： jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件
   complete回调：动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

2. 获得动画执行状态设置方法
   animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知
   如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
   .animate( properties, options )
   例子：
   //观察每一次动画的改变
   $aaron.animate({
   height: '50'
   }, {
   duration :2000,
   //每一个动画都会调用
   step: function(now, fx) {
   $aaron.text('高度的改变值:'+now)
   }
   })

3. 停止动画stop
   stop还有几个可选的参数，简单来说可以这3种情况
    .stop(); 停止当前动画，点击在暂停处继续开始
    .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
    .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核心

1. each方法的应用 遍历方法
   jQuery.each(array, callback )
   jQuery.each( object, callback )
   第一个参数传递的就是一个对象或者数组，第二个是回调函数
   $.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
   });
   each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同
   jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。
   $.each(["Aaron", "慕课网"], function(index, value) {
   return false; //停止迭代
   });

2. 查找数组中的索引inArray
   jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
   语法：
   jQuery.inArray( value, array ,[ fromIndex ] )
   用法非常简单，传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始
   例如：在数组中查找值是5的索引
   $.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

3. DOM元素的获取index方法
   get方法是通过已知的索引在合集中找到对应的元素。而index方法则是已知元素在合集中找到对应的索引。

<ul>
<a></a>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>
//如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理
$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2")) //结果:1

1. 去空格神器trim方法
   Query.trim()函数用于去除字符串两端的空白字符
   这个函数很简单，没有多余的参数用法
   需要注意：
    移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
    如果这些空白字符在字符串中间时，它们将被保留，不会被移除
2. DOM元素的获取get方法
   通过jQuery获取所有的a元素合集$("a")，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法
   <a>1</a>
   <a>2</a>
   <a>3</a>
   $(a).get(1)