JQ操作和动画

1.JQ操作类

 1 <input type="button" value="添加类" id="add" />
 2         <input type="button" value="移除类" id="remove" />
 3         <input type="button" value="判断类" id="has" />
 4         <input type="button" value="切换类" id="toggle" />
 5         <div class="box" class="color">我是div盒子</div>
 6         <script src="./jquery-1.12.4.js"></script>
 7         <script>
 8             $(function(){
 9                 // 添加类
10                 $("#add").click(function(){
11                     // 设置单个类
12                     // $(".box").addClass("bgc");
13                     
14                     // 一次性添加多个类  添加多个类 把全部的类放在一个字符串里 用空格隔开
15                     // 如果不加空格 默认一个类
16                     // 和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开
17                     $(".box").addClass("font30 w300 h300 bgc");
18                 })
19                 // 移除类
20                 $("#remove").click(function(){
21                     
22                     // 参数什么都不传 那么就表示移除全部的的类 包括原本设置默认的样式
23                     // 和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开
24                     
25                     $(".box").removeClass();
26                 })
27                 // 判断类
28                 $("#has").click(function(){
29                     // 判断元素是否拥有某个类 如果有就返回true 否则false
30                     console.log($(".box").hasClass("bgc"));
31                 })
32                 // 切换类
33                 $("#toggle").click(function(){
34                 // 判断元素是否拥有某个类 如果有就返回true 否则false
35                     $(".box").toggleClass("font30");
36                 })
37             })
38         </script>

2.JQ动画

　　JQ动画分为以下几类：

　　1.动画的显示隐藏

 1 <body>
 2         <input type="button" value="显示" id="show" />
 3         <input type="button" value="隐藏" id="hide" />
 4         <input type="button" value="切换" id="toggle" />
 5         <div class="one"></div>
 6     </body>
 7     <script src="./jquery-1.12.4.js"></script>
 8     <script>
 9         $(function(){
10             /* show()方法 有两个参数
11              可以填毫秒数 也可以填代表时间的字符串"slow" "normal" "fast"
12              参数二 动画执行完毕之后 他的回调函数
13              */
14             $("#show").click(function(){
15                 // 如果show方法不参加任何参数 就表示没有有动画
16                 // $(".one").show();
17                 
18                 // 只要给了参数 那么就会有动画
19                 $(".one").show("nomal");
20                 
21 //                 $(".one").show("slow",function(){
22 //                     alert("我的动画走完了")
23 //                 })
24             })
25             
26             // 隐藏
27             $("#hide").click(function(){
28                 $(".one").hide(1000,function(){
29                     alert("结束了");
30                 });
31             })
32             // 切换
33             $("#toggle").click(function(){
34                 $(".one").toggle(1000);
35             })
36         })
37     </script>

　 2.动画滑入滑出

 1 <body>
 2         <input type="button" value="滑入" id="slideDown" />
 3         <input type="button" value="滑出" id="slideUp" />
 4         <input type="button" value="切换" id="slideToggle" />
 5         <div class="one"></div>
 6     </body>
 7     <script src="./jquery-1.12.4.js"></script>
 8     <script>
 9         $(function(){
10             // 滑入
11             // slideDown 有两个参数
12             // 参数1 动画时间长  可以填毫秒数 也可以填代表时间的字符串"slow" "normal" "fast"
13             // 参数二 动画执行完毕之后 他的回调函数
14             $("#slideDown").click(function(){
15                 // 如果slideDown 不写参数 那么就相当于给了一个默认的时长 normal
16                 $(".one").slideDown();
17                 $(".two").slideDown("normal");
18             })
19             // 滑出
20             $("#slideUp").click(function(){
21                 $(".one").slideUp(1000,function(){
22                     alert("结束了");
23                 });
24             })
25             // 切换
26             $("#slideToggle").click(function(){
27                 $(".one").slideToggle(2000,function(){
28                     alert("结束了");
29                 });
30             })
31         })
32     </script>

　　3..动画淡入淡出

 1 <body>
 2         <input type="button" value="淡入" id="fadeIn" />
 3         <input type="button" value="淡出" id="fadeOut" />
 4         <input type="button" value="切换" id="fadeToggle" />
 5         <input type="button" value="淡入到哪里" id="fadeTo"/>
 6         <div class="one"></div>
 7 
 8     </body>
 9     <script src="./jquery-1.12.4.js"></script>
10     <script>
11         $(function(){
12             // 淡入
13             $("#fadeIn").click(function(){
14                 $(".one").fadeIn(1000,function(){
15                     alert("风花雪月")
16                 });
17             })
18             // 淡出
19             $("#fadeOut").click(function(){
20                 $(".one").fadeOut(1000,function(){
21                     alert("花前月下")
22                 });
23             })
24             // 切换
25             $("#fadeToggle").click(function(){
26                 $(".one").fadeToggle(1000,function(){
27                     alert("风和日丽")
28                 });
29             })
30             // 淡入到哪里  第二个参数表示淡入目标透明度
31             $("#fadeTo").click(function(){
32                 $(".one").fadeTo(1000,0.5)
33                 });
34         })
35     </script>

　　4.动画队列

<body>
        <input type="button" value="开始" id="start" />
        <input type="button" value="结束" id="stop" />
        <div class="box"></div>
        <script src="./jquery-1.12.4.js"></script>
        <script>
            // 动画队列 在同一元素上执行多个动画 那么对于这个动画来说 只会执行当前的动画
            // 后面的动画都会被放进动画队列,等前面的动画执行完毕后,才会执行后面的动画
            $(function(){
                // 开始动画
                $("#start").click(function(){
                    $(".box").slideDown(2000).slideUp(2000)
                })
                // 停止动画
                $("#stop").click(function(){
                    /* stop()是用来停止动画的 有两个参数
                    参数1 是否清除队列
                    参数2 是否跳转到动画的最终效果
                    
                    如果两个参数都不写 那么默认的两个参数都是false
                    */ 
//                     $(".box").stop(false,true);
//                     $(".box").stop(true,false);
//                     $(".box").stop(true,true);
//                     $(".box").stop(false,false);
                    $(".box").stop();
                })
            })
        </script>

　　5.自定义动画

 1 <body>
 2         <input type="button" value="移动到800" id="move800" />
 3         <div id="box"></div>
 4         
 5         <script src="./jquery-1.12.4.js"></script>
 6         <script>
 7             $(function(){
 8                 // 给按钮点击事件 让盒子从0移动到800
 9                 /* 
10                  animate方法有四个参数
11                     参数1 是必填项  为一个对象 里面填的是需要用来做动画的属性
12                     参数2 可选项  动画时长 400
13                     参数3 可选项   运动曲线 匀速 linear  缓动 swing（默认值）
14                     参数4  可选项  动画执行完毕的回调函数
15                  */
16             $("#move800").click(function(){
17                 // 自定义动画
18                 $("#box").animate({
19                     left : 800,
20                     height : 300,
21                     width : 300,
22                     opacity : 0.6
23                 },3000,"linear",function(){
24                     // 第一个动画执行完毕之后
25                     $("#box").animate({
26                         left : 200,
27                         height : 150,
28                         width : 50,
29                         top : 300,
30                         opacity : 1
31                     },2000,function(){
32                         $("#box").animate({
33                             left : 800,
34                             height : 200,
35                             width : 100,
36                             top : 100,
37                             opacity : 1
38                         },2000,)
39                     })
40                 })
41                 })
42             })
43         </script>