jQuery-动画

隐藏和显示

让页面上的元素不可见，一般可以通过设置css的display为none属性。jQuery中可以直接调用.hide()来隐藏，这个方法可以接受一个参数，用来实现动画化，并且有两个快捷参数fast 和slow 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

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

$("#a2").hide({
    duration: 3000,
    complete: function() {
        alert('执行3000ms动画完毕')
    }
})

既然有隐藏，当然也就有显示，使用方法类似，举个栗子：
$('elem').hide(3000).show(3000)
但是需要注意的是：如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

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

上卷下拉效果

上面的显示和隐藏方法会将元素的宽度，高度，以及不透明度，同时进行动画操作。这样看起来不是很爽
下拉动画：.slideDown()：用滑动动画显示一个匹配元素
.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束：.slideDown( [duration ][, complete ] )
持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。
字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时。
如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。
具体使用：

1
2
3

$("ele").slideDown(1000, function() {
    //等待动画执行1秒后(也就是动画完成后),执行别的动作....
});

那么上卷函数就是slideUp了，使用方法一样

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

和隐藏方法类似，也有上卷下拉切换的方法slideToggle

淡入淡出效果

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果，使用方法和上面的几个函数是一样的
有out当然就有in，所以有相应的fadeIn()方法
相应的也有一个切换的方法：fadeToggle()如果隐藏就显示，如果显示就隐藏
既然是透明度，那么就不止0和1，还有0.5这样的半透明状态，所以jQ还提供了一个方法：fadeTo()来过渡到指定的透明度，用法都是类似，不多说

自定义动画

自定义主要使用的是animate方法

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

使用方法可以参考下面的栗子

var $aaron = $("#aaron");
if (v == "1") {
    // 数值的单位默认是px
    $aaron.animate({
        width  :300,
        height :300
    });
} else if (v == "2") {
    // 在现有高度的基础上增加100px
    $aaron.animate({
         width  : "+=100px",
         height : "+=100px"
    });
} else if (v == "3") {
    $aaron.animate({
        fontSize: "5em"
    }, 2000, function() {
        alert("动画 fontSize执行完毕!");
    });
} else if (v == "4") {
    //通过toggle参数切换高度
    $aaron.animate({
        width: "toggle"
    });
}

关于动画的时间也是提供’fast’ 和 ‘slow’字符串，分别表示持续时间为200 和 600毫秒。
如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
除了上面的创建方式，其实还有一种：.animate( properties, options )
options参数

duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

if (v == "1") {
    $aaron.animate({
        height: '50'
    }, {
        duration :2000,
        //每一个动画都会调用
        step: function(now, fx) {
           $aaron.text('高度的改变值:'+now)
        }
    })
}

还有就是可以手动停止动画，方法就是stop了，它最多可以接受2个参数，具体怎么用：

$("#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的实例是一个元素合集
jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
   return false; //停止迭代
});

each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
$.inArray(5,[1,2,3,4,5,6,7]) 返回对应的索引：4，在ECMAScript5已经有数据的indexOf方法支持了

JQ同样也支持trim方法去除字符串两段的空格

如果想要获得指定的DOM对象，比如：第二个a元素的查找： $(a).get(1)，索引从0开始嘛~但是它是支持从后往前找的，比如找最后一个get(-1)，index方法就是相反了，根据DOM元素来获取索引