04-5 jquery动画、核心

1、基础

（1）.hide()隐藏 和.show()显示，参数可以写毫秒数表示执行时间

 <script>
        $("#btn1").on("click",function(){
            $("#div1").hide(3000);
        })
        $("#btn2").on("click",function(){
            $("#div1").show(3000);
        })
    </script>

（2）、 toggle() 相当于hide和show的结合体

2、渐变

（1）淡入淡出 fadeIn 和fadeOut

 $("#btn1").on("click",function(){
            $("#div1").fadeIn(5000);
        })
        $("#btn2").on("click",function(){
            $("#div1").fadeOut(5000);
        })

如上图，淡入淡出和隐藏显示的区别在于，宽高不变，只是颜色在改变

3、滑动

slideDown 往下滑出

slideUp 往上收起

slideToggle slideDown 和 slideUp 的结合体

 <div id="div1"></div>
    <button id="btn1">111</button>
    <button id="btn2">222</button>
    <script>
        $("#btn1").on("click",function(){
            $("#div1").slideDown(5000);
        })
        $("#btn2").on("click",function(){
            $("#div1").slideUp(5000);
        })

4、自定义

（1）.animate() , 第一个参数是变化的样式，第二个参数是变化的时间

 $("#btn1").on("click",function(){
            $("#div1").animate({
                width : 500,
                height : 500
            },3000)
        })

此外，他还有第三个参数，动画回调函数，当动画执行完以后再执行

$("#btn1").on("click",function(){
            $("#div1").animate({
                width : 500,
                height : 500
            },3000,function(){
                console.log("hahaha");
            })
        })

如果对同一个对象执行不同的animate，不会覆盖，而是会形成一个队列，等上一个动画执行完后执行下一个动画

这样的话，就可以用链式操作去写

当样式里的原来宽度的你不知道，你可以用+=去设置

（2）.stop 停止当前正在执行的动画

$("#btn1").on("click",function(){
            $("#div1").animate({
                width : 500,
                height : 500
            },3000,function(){
                console.log("hahaha");
            }).animate({
                opacity: 0.6
            })
        })
        $("#btn2").on("click",function(){
            $("#div1").stop();
        })

.stop() 有俩参数， 默认两个参数都是false，第一个参数代表是否清空队列，默认是false，不清空队列，只是停止当前的动画，别的动画还会继续执行，如果为true的话，就是不仅仅停止当前动画，还要清空要执行动画的队列

第二个参数如果为true的话，就是把当前正在执行的动画跳转到终点，也就是不再执行动画而是直接变成你最后想要的样式，其他的动画正常进行

如果俩参数都为true，就是直接将当前的动画跳转到最后，并且队列里的其他动画都清除了

二、核心

1.jQuery 对象 这些符号，直接用$.调用就行了

（1）extend ，将两个对象合在一起，如果俩对象中有重复的属性，那么就用下面的把上面的覆盖，如果没有，那么取并集

（2）trim去掉首尾空格

2、DOM元素方法

可以获取到元素在兄弟中的的索引

但是如果想要获取li在所有li中的索引呢,如图，想获取class为bb的li在所有li中的索引

参数里写要查找的集合范围局可以了