jQuery基础修炼圣典—动画篇

隐藏元素的hide方法

//点击buttom1 直接隐藏
        $("button:first").click(function() {
            $("#a1").hide()
        });

//点击buttom2 执行动画隐藏
        $("button:last").click(function() {
            $("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('执行3000ms动画完毕')
                }
            })
        });

显示元素的show方法

  //点击buttom
    //执行3秒隐藏
    //执行3秒显示
    $("button").click(function() {
        $("#a1").hide(3000).show(3000)
    });

显示与隐藏切换toggle方法

$("button:first").click(function() {
        $(".left").toggle(3000)
    });

下拉动画slideDown

//点击buttom
        //执行3秒隐藏
        //执行3秒显示
        $("button:first").click(function() {
            $("#a1").slideDown(3000)
        });

//点击buttom
        //执行3秒隐藏
        //执行3秒显示
        $("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                alert('动画执行结束')
            })
        });

上卷动画slideUp

 //点击buttom
        //执行3秒隐藏
        //执行3秒显示
        $("button:first").click(function() {
            $("#a1").slideUp(3000)
        });

//点击buttom
        //执行3秒隐藏
        //执行3秒显示
        $("button:last").click(function() {
            $("#a2").slideUp(3000,function(){
                alert('动画执行结束')
            })
        });

上卷下拉切换slideToggle

 $("button").click(function() {
            $("#a1").slideToggle(3000)
        });

淡出动画fadeOut

 //【显示】按钮
    $("#btnShow").click(function() {
        $("p").show();
    });

    //【隐藏】按钮
    $("#btnFadeOut").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeOut();
        } else if (v == "2") {
            $("p").fadeOut("slow");
        } else if (v == "3") {
            $("p").fadeOut(3000);
        } else if (v == "4") {
            $("p").fadeOut(2000, function() {
                alert("隐藏完毕!");
            });
        } else if (v == "5") {
            $("p").fadeOut(1000, "linear");
        } else if (v == "6") {
            $("p").fadeOut({
                duration: 1000
            });
        }
    });

淡入动画fadeIn

 //【显示】按钮
    $("#btnFadeIn").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeIn();
        } else if (v == "2") {
            $("p").fadeIn("slow");
        } else if (v == "3") {
            $("p").fadeIn(3000);
        } else if (v == "4") {
            $("p").fadeIn(2000, function() {
                alert("显示完毕!");
            });
        } else if (v == "5") {
            $("p").fadeIn(1000, "linear");
        } else if (v == "6") {
            $("p").fadeIn({
                duration: 1000
            });
        }
    });

    // 【隐藏】按钮
    $("#btnHide").click(function() {
        $("p").hide();
    });

淡入淡出切换fadeToggle

//【切换显示/隐藏】按钮
    $("#btnFadeSwitch").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeToggle();
        } else if (v == "2") {
            $("p").fadeToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(3000);
        } else if (v == "4") {
            $("p").fadeToggle(1000, function() {
                alert("切换完毕!");
            });
        } else if (v == "5") {
            $("p").fadeToggle(1000, "linear");
        } else if (v == "6") {
            $("p").fadeToggle({
                duration: 1000
            });
        }
    });

淡入效果fadeTo

//【切换显示/隐藏】按钮
    $("#btnFadeSwitch").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('完成')
            });
        }
    });

toggle与slideToggle以及fadeToggle的比较
1)操作元素的显示和隐藏可以有几种方法。
例如：

改变样式diplay为none
位置高度为0
透明度为0
都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeInOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

2)toggle、sildeToggle以及fadeToggle的区别：
toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果
当然细节上还是有更多的不同点:

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

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

动画animate

 $("#exec").click(function() {
        var v = $("#animation").val();
        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"
            });
        } 
    });

$("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一个动画都会调用
                step: function(now, fx) {
                   $aaron.text('高度的改变值:'+now)
                }
            })
        } else if (v == "2") {
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                   $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });

停止动画stop

//点击执行动画
    $("#exec").click(function(){
        $("#aaron").animate({
            height: 300
        }, 5000)
        $("#aaron").animate({
            width: 300
        }, 5000)
        $("#aaron").animate({
            opacity: 0.6
        }, 2000)
    })


    $("#stop").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //当前当前动画
            $aaron.stop()
        } else if (v == "2") {
            //停止所以队列
            $aaron.stop(true)
        } else if (v == "3") {
            //停止动画，直接跳到当前动画的结束
            $aaron.stop(true,true)
        } 
    });

jQuery的核心
1）each方法的应用

语法

jQuery.each(array, callback )
jQuery.each( object, callback )
第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each([“Aaron”, “慕课网”], function(index, value) {
//index是索引,也就是数组的索引
//value就是数组中的值了
});
each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

2）查找数组中的索引inArray
jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1

语法：
jQuery.inArray( value, array [, fromIndex ] )

3）去空格神器trim方法
jQuery.trim()函数用于去除字符串两端的空白字符

这个函数很简单，没有多余的参数用法

需要注意：

移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
如果这些空白字符在字符串中间时，它们将被保留，不会被移除

4）DOM元素的获取get方法

jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

以下有3个a元素结构：

<a>1</a>
<a>2</a>
<a>3</a>

通过jQuery获取所有的a元素合集$(“a”)，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法

语法：

.get( [index ] )
注意2点

get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引
所以第二个a元素的查找： $(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

同样是找到第二元素，可以传递 $(a).get(-2)

5）DOM元素的获取index方法

get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()
.index( selector )
.index( element )
如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1
简单来说：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$(“li”).index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2"))  //结果:1