jQuery 动画篇

1、动画基础隐藏和显示（show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置）

（1）隐藏元素的hide方法

快捷参数：

.hide("fast / slow") 'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

方法一
<script type="text/javascript">
    //点击buttom1 执行动画隐藏
    $("button:first").click(function() {
          $("#a2").hide({
                duration: 3000,
                complete: function() {
                alert('执行3000ms动画完毕')
                }
          })
    });
</script>
方法二
<script type="text/javascript">
    //点击buttom2 执行动画隐藏
    $("button:last").click(function() {
        $("#a1").hide(3000,function(){
            alert('执行3000ms动画完毕')
        })
    });
</script>

（2）显示元素的hide方法

   
   

    
    hide-show
   
   
直接hide-show动画

<script type="text/javascript">
    //点击button
    //执行3秒隐藏
    //执行3秒显示
    $("button").click(function() {
        $("#a1").hide(3000).show(3000)
    });
</script>

（3）显示与隐藏切换toggle方法

//.left  .right 为两个div块

<script type="text/javascript">
    $("button:first").click(function() {
        $(".left").toggle(3000)
    });
</script>

<script type="text/javascript">
    $("button:last").click(function() {
        $(".right").toggle(3000)
    });
</script>

2、上卷下拉效果

（1）下拉动画slideDown  （      slideDown(fast)       slideDown(slow)           ）

基本操作：$("ele").slideDown()

执行回调：$("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动作.... });

（2）上卷动画slideUp（用法同slideDown一样）

（3）上卷下拉切换slideToggle

    
    

点击slideToggle上下卷滚切换
        
        
<script type="text/javascript">
    //点击button
    //执行3秒隐藏
    //执行3秒显示
    $("button:last").click(function() {
        $("#a1").slideToggle('fast',function(){
            alert('动画执行结束')
        })
    });
</script>

3、淡入淡出效果（淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，变化的区间要么是0，要么是1）

（1）淡出动画fadeOut（fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果）

• .fadeOut("slow / fast");   /  .fadeOut(1000);   / .fadeOut(1000,"linear"); （这里的linear是指动画的行进速度方法（easing），顾名思义就是淡出的速度保持恒定的线性速度。而jQuery 核心默认的easing为swing,行进速度在动画开始和结束时比在动画中间时稍慢。）

• .fadeOut(2000, function () { });

• .fadeOut( { duration: 1000 });

（2）淡入动画fadeIn（fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果）

（用法与fadeOut一致）

（3）淡入淡出切换fadeToggle（fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果）

（4）淡入效果fadeTo（让元素保持动画效果，执行opacity  不为0或1时的效果）

fadeTo
    
测试文字透明度效果
    
测试测试
    透明度的设置效果：
    fadeTo( "slow" ,0.5 )fadeTo( 1000 ,0.2 )fadeTo( 1000 ,0.9 ,complete)

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

4、动画切换的比较

toggle与slideToggle和fadeToggle的比较

（1）toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

（2）操作元素的显示和隐藏可以有几种方法。例如：

• 改变样式display为none

• 设置位置高度为0

• 设置透明度为0

（3）toggle与slideToggle细节区别：

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

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

5、自定义动画

（1）动画animate

a、所有用于动画的属性必须是数字的，除非另有说明；

b、注意属性值的单位

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

c、每个属性能使用'show', 'hide', 和 'toggle'

//通过toggle参数切换高度
.animate({
    width: "toggle"
});

d、提供一个以 += 或 -= 开始的值

//在现有高度上增加50px
.animate({ 
    height: '+=50px'
}, "slow");

e、CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

f、options参数

• duration - 设置动画执行的时间

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

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

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

• complete：动画完成回调

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

     
     Animation complete.
    
    
');
    }
});

（2）停止动画stop

a、stop的几个函数

• .stop();  停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，当调用.stop()的时候，队列中的下一个动画立即开始。

• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

6、jQuery核心

（1）each方法的应用

• 来处理对象和数组的遍历（回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。）

• jQuery.each ( array, callback )            （jQuery.each == $.each）
  

• jQuery.each ( object, callback )

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

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

• 如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于（或大于）-1 来判断

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

（4）DOM元素的get方法

• get方法是获取的dom对象，也就是通过document.getElementById获取的对象

• get方法是从0开始索引（所以第二个a元素的查找： $(a).get(1)）

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

（5）DOM元素的index方法

• 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

• 通过传递dom查找      $(" li ").index(document.getElementById(" test5 ")

• 通过传递jQuery对象查找  $(" li ").index($(" #test5 "))