渐入渐出（升级版）

制作步骤

一、自定义四个button按钮包在一个盒子内，并且将四个自定义标签设好id值(召唤英雄、渐出、渐入、透明度设置)；
二、创建img标签，类别制定为隐藏(hide);
三、导入jQuery模块；
四、召唤英雄制作：使用toggle()方法召唤英雄
五、渐出效果制作：使用fadeOut()方法，制作渐出效果，括号内可以指定渐出时间，单位为毫秒，括号内可以增加回调函数。
六、渐入效果制作：使用fadeIn()方法，制作出渐入效果，括号内可以指定渐出时间，单位为毫秒,括号内可以增加回调函数。
七、透明度制作:
八、渐入渐出制作。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .c1{
11             margin-top: 5px;
12         }
13     </style>
14 </head>
15 <body>
16 <div>
17     <button id="d1">召唤英雄</button>
18     <button id="d2">渐出</button>
19     <button id="d3">渐入</button>
20     <button id="d4">透明度调整</button>
21     <button id="d5">渐入渐出</button>
22 </div>
23 
24 <div class="c1">
25     <img src="../../img/李白.jpg" alt="古典风写真" height="550" class="hide">  <!--默认隐藏-->
26 </div>
27 
28 <script src="jquery-3.2.1.js"></script>
29 <script>
30     //召唤英雄
31     $("#d1").on("click",function () {
32         $("img").toggle();  //召唤英雄
33 //        $("img").fadeOut();
34     });
35     //淡出
36     $("#d2").on("click",function () {
37         $("img").fadeOut(1000);     //1000ms渐出效果
38     });
39     //淡入
40     $("#d3").on("click",function () {
41         $("img").fadeIn(1000);     //1000ms渐入效果
42     });
43     //透明度设置
44 //    $("#d4").on("click",function(){
45 //        $("img").fadeTo(3000,0.16,function () {
46 //            alert("我调整的透明度为0.66")
47 //        })
48 //    })
49     //渐入渐出制作
50     $("#d5").on("click",function () {
51         $("img").fadeToggle(3000,function () {
52 //            alert("我是渐入渐出")
53         })
54     })
55 //        $("#d3").on("click",function () {
56 //        $("img").fadeIn(3000,function(){
57 //            alert("显示完毕！")      //1000ms渐出效果，并且增加回调函数
58 //        });
59 </script>
60 </body>
61 </html>
View Code

 

posted @ 2017-10-16 20:15  Justin067  阅读(119)  评论(0)    收藏  举报
TOP