jQuery基础_动画

1.hide方法

jQuery.hide()无参数会让元素直接不见，若带参数，就会变为一个宽高透明度不断减少直至0的动画，最后元素将不再影响布局。

下面分别为快捷参数和自定义设置：

$("#a1").hide("slow");//hide（“fast”），fast=200ms，slow=600ms

$("#a1").hide(5000);

$("#a2").hide({
                duration: 3000,    //3s
                complete: function() {
                    alert('执行3000ms动画完毕')//执行完毕函数参数
                }
            })；  //也可简写，看下面，类似

对应有show方法，用法一样，例如：

$().hide(3000).show(3000)，若是用button的click触发，可能在动画过程中点击会不断触发，就像排队一样。可以用stop().hide().show()

2.集hide、show一身的toggle()方法

无参情况：隐藏变显示，显示变隐藏。

$(".right").toggle({
               duration:3000,
               complete:function(){
                alert("as");
               }
            })

$(".right").toggle(3000,function(){
                alert("as");
               });                //简写

$(".left").toggle(3000)

3.上、下拉动画
slidedown，slideup用法同上。

还有集于一身的slideToggle方法。

4.淡出、入动画

用法类似，有参无参，回调函数都可以，还有便捷参数fast，slow。（fast=200，slow=600，默认400）

还有linear：线性淡出，swing：先快后慢

$("p").fadeOut(1000, "swing");

还有淡入动画fadeIn,集于一身的fadeToggle()
此外，fadeOut和fadeIn都是透明度0-1变化，最后不影响布局，还有指定终点的fadeTo，同样集于一身:

$("p").fadeTo("slow", 0.5);opacity=0.5为终点

$("p").fadeTo(1000, 0.2);

 $("p").fadeTo(1000, 0.9, function() {
                alert('完成')
            });

5.更强大的自定义动画

$aaron.animate({
                fontSize: "5em"
            }, 2000,"swing", function() {
                alert("动画 fontSize执行完毕!");
            });

也就是（{参数名：“终点”，...},延迟时间,swing or linear,回调函数）；

还有些可行设置，比如：
width  : "+=100px"在第一个参数中这么写代表现有width加100

 width: "toggle"显示，隐藏操作，等同于整体display：none、block

也可以将后面的参数用{}包含起来：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

除了complete，还有step：每个动画每一步后都执行函数，progress：每次动画调用时执行函数，例子：

step参数是（当前属性值，当前属性对象）

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

progress参数是（当前对象，进度0-1，还需时间ms），可直接用arguments[]调用，0-2。

$aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx,xx) {
                   $aaron.text('进度:'+xx) 
                }
            })

6.停止动画

stop()停止当前动画，其他动画同步继续

stop(true)停止所有动画

stop（true，true）停止所有动画，当前动画直接到终点

7.each方法

$.each(["WTF", "百度"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});

例子：

$.each(['Aaron', '慕课网'], function(i, item) {
                $aaron.append("索引=" + i + "; 元素=" + item);
            });

$.each({
                name: "张三",
                age: 18
            }, function(property, value) {
                $aaron.append("属性名=" + property + "; 属性值=" + value);
            });

注意function第一个参数是key、索引，第二个是值。

8.数组索引方法

$.inArray('Aaron',['test','Aaron', 'array','慕课网']); 返回1

三参数，第三个参数为查找起始索引

$.inArray('a',['a','b','c','d','a','c'],5); 返回-1

9.trim方法

用于去除字符串开始于结尾处的所有换行符、空格（连续空格）和制表符tab，字符串中间的空白字符不会被移除

10.get方法

比如，有一串a对象，通过get返回ＤＯＭ对象：

<div id="aaron">
     <a>1</a>
     <a>2</a>
     <a>3</a>
     <a>4</a>
     <a>5</a>
</div>

$("#aaron a")．get(1).style.color="#ccc" //第二个a ,0,1,2,

$aaron.get(-1)；//最后一个a ,-1,-2,

11.获取索引的index方法

返回在指定对象中的索引，例子
没有参数，就返回同辈元素中的索引。

若有参数，DOM或jQuery对象，则返回在指定jQuery对象中的索引。

    <ul>
        <a></a>
        <a></a>
        <li id="test1">1</li>
        <li id="test2">2</li>
        <li id="test3">3</li>
    </ul>
    <ul>
        <li id="test4">4</li>
        <li id="test5">5</li>
        <li id="test6">6</li>
    </ul>

$("li").index() 返回2

$("li").index(document.getElementById("test5"))返回4

$("li").index($("#test6"))返回5