jQuery基础-动画篇

1、隐藏元素的hide方法

//点击buttom1 直接隐藏

        $("button:first").click(function() {

            $("#a1").hide()

        });

/点击buttom2 执行动画隐藏

        $("button:last").click(function() {

            $("#a2").hide({

                duration: 3000,

                complete: function() {

                    alert('执行3000ms动画完毕')

                }

            })

2、显示元素的show方法、

//点击buttom，执行3秒隐藏，执行3秒显示

    $("button").click(function() {

        $("#a1").hide(3000).show(3000)

    });

3、显示与隐藏切换toggle方法

处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。

如果元素是最初显示，它会被隐藏

如果隐藏的，它会显示出来

 $("button:first").click(function() {

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

});//直接show-hide动画

 $("button:last").click(function() {

        $(".right").toggle(3000)

});//直接hide-show动画

4、下拉动画slideDown

.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none

//点击buttom，执行3秒隐藏，执行3秒显示

        $("button:last").click(function() {

            $("#a2").slideDown(3000,function(){

                alert('动画执行结束')

            })

        });

 

5、上卷动画slideUp

//点击buttom，执行3秒隐藏，执行3秒显示

        $("button:last").click(function() {

            $("#a2").slideUp(3000,function(){

                alert('动画执行结束')

            })

        });

6、上卷下拉切换slideToggle

$("button").click(function() {

            $("#a1").slideToggle(3000)

        });

7、淡出动画fadeOut

 $("#btnFadeOut").click(function() {

       $("p").fadeOut(2000, function() {

                alert("隐藏完毕!");

8、淡入动画fadeIn

.fadeIn( [duration ] [, complete ] )

duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。

元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。

9、淡入淡出切换fadeToggle

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

常用语法：.fadeToggle( [duration ] [, complete ] )

可选的 duration 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。

10、淡入效果fadeTo

.fadeTo( duration, opacity [, complete ] )

必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

11、toggle与slideToggle以及fadeToggle的比较

toggle：切换显示与隐藏效果

sildeToggle：切换上下拉卷滚效果

fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：

toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

 

12、动画animate

.animate( properties [, duration ] [, easing ] [, complete ] )

.animate( properties, options )

   duration - 设置动画执行的时间

   easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数

   step：规定每个动画的每一步完成之后要执行的函数

   progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

   complete：动画完成回调

$("#exec").click(function() {

        var v = $("#animation").val();

        var $aaron = $("#aaron");

        if (v == "1") {

            // 数值的单位默认是px

            $aaron.animate({

                width  :300,

                height :300

            });

        }else if (v == "3") {

            $aaron.animate({

                fontSize: "5em"

            }, 2000, function() {

                alert("动画 fontSize执行完毕!");

            });

        } else if (v == "4") {

            //通过toggle参数切换高度

            $aaron.animate({

                width: "toggle"

            });

        }

});

 

$('#elem').animate({

    width: 'toggle',  

    height: 'toggle'

  }, {

    duration: 5000,

    specialEasing: {

      width: 'linear',

      height: 'easeOutBounce'

    },

    complete: function() {

      $(this).after('<div>Animation complete.</div>');

    }

  });

13、停止动画stop

$("#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就是数组中的值了

});

2、查找数组中的索引inArray

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

语法：

jQuery.inArray( value, array [, fromIndex ] )

用法非常简单，传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始

例如：在数组中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

3、去空格神器trim方法

jQuery.trim()函数用于去除字符串两端的空白字符

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

需要注意：

移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）

如果这些空白字符在字符串中间时，它们将被保留，不会被移除

 

 

4、DOM元素的获取get方法

<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)

5、DOM元素的获取index方法

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

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

.index()  返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

.index( selector )

.index( element )

如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置

如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1