jQuery基础篇（四）动画

基础显示隐藏动画

jQuery提供了show()、hide()、toggle()（隐藏时显示、显示时隐藏）三种方式来控制元素的显示和隐藏，它们三个的用法一直，我们以show()为例说明。

// 直接显示
$("#myDiv").show();
// 在2秒内逐步显示
$("#myDiv").show(2000);
// 动画时间，且定义一个成功回调函数
$("#myDiv").show(2000, function(){
    alert("123");
});

---

上卷下拉动画

jQuery提供了slideDown()、slideUp()、slideToggle()三种方法来控制元素的上卷下拉动画，我们以slideDown()来举例。

$("#myDiv").slideDown();
$("#myDiv").slideDown(2000);
$("#myDiv").slideToggle(2000, function(){
    alert("完成");
});

---

淡入淡出动画

jQuery提供了fadeOut()、fadeIn()、fadeToggle()、fadeTo()四种方式来控制元素的淡入淡出，我们以fadeOut()为例。

$("#myDiv").fadeOut();
$("#myDiv").fadeOut(2000);
$("#myDiv").fadeOut(2000, function(){
    alert("完成");
})

对于fadeOut()、fadeIn()、fadeToggle()来讲都是0->1或者1->0的转换，而fadeTo()是到任意透明度的转换。

$("#myDiv").fadeTo(2000, 0.5, function(){
    alert("已完成");
});

---

自定义动画

jQuery提供的自定义动画就是利用animate()方法在一定时间内改变元素的CSS样式，从而达到动画的效果。

$("#myDiv").animate(properties, options);

properties代表了目标CSS属性，注意其属性名称都是DOM名称，options参数包含以下部分。

• duration，动画时间，ms；
• easing，规定要使用的easing函数，过渡使用哪种缓动函数；
• step，规定每一步动画执行后都要调用的函数，这是一个步的概念；
• progress，规定每一次动画都要调用的函数，这是一个进度的概念；
• complete，动画执行完毕后调用的函数。

这些options参数是可选的，可多可少也可以一个都没有。

举例：

$("#myDiv").animate({
    width: "100px",
    height: "100px"
}, {
    duration: 2000,
    step: function(now, fx){
        alert(now);
    },
    progress: function(now, fx){
        alert(argument[1]);
    }
});

---

jQuery核心

each()方法

我们可以用each()方法来遍历数据，不管这个数据是对象还是数组，实际上each()方法就是jQuery对for循环的封装，它的基础语法是这样的：$(selector).each(date, callback)，循环遍历data，每次都执行callback方法，如果callback返回false则停止遍历，返回其它任何值都不会影响遍历的进行。

遍历对象：

$.each({
    name: "qdl",
    age: 25
}, function(key, name){
    //key属性名, name值
});

遍历数组：

$.each(["qdl", "qjg"],function(index, value){
    //index下标 value值
});

inArray()方法

类似于Java中的indexOf，用来判断某个数组中是否含有指定的元素，当返回值>=-1时说明存在，其语法为：$.inArray(value, array, [startIndex]);value是需要查找的值，array是查找的对象，startIndex是从第几条数据开始查找，此参数是可选的，默认为0。

$.inArray("qdl", ["qjg", "qdl"]); //返回1

trim()方法

去除文本头尾两边的空格，在中间的空格会被保留，和Java一样。

get()方法

当我们利用过滤器获取符合条件的一组元素时，我们又想得到这组元素中的某个特性元素时，可以用到get()方法。

// html中所有p元素中的第2个，下面两种方式是一样的，不过前者更加灵活
$("p").get(1);   
$("p:eq(1)");

index()方法

通过元素查找index()，我们可以将其看作是inArray()的反向。它总共有三种写法：

$.index()
$.index(element)
$.index(selector)

<div>
    <a></a>
    <p id="p1"></p>
    <p id="p2"></p>
</div>
<div>
    <a></a>
    <p id="p3"></p>
    <p id="p4"></p>
</div>

一：index()，无参时返回的是$对象中第一个元素在其父元素中的位置。

$("p").index()==1;

二：index(element)，元素作为参数，返回的是element相对于$筛选集合的位置。

$("p").index($("#p3"))==2；

三：index(selector)，选择器作为参数，即原先的元素在选择器中的位置，作用和inArray()方法一样，不过调用者是需要查找的元素，参数是查找的合集。

$("#p3").index($("p"))==2; 

---