JQuery {(顯示隱藏),(向上向下滑動),(淡入淡出),(自定義動畫效果)}

本文轉載自查看原文 2019-07-24 20:49 3960 js

  1 <html>
  2     <head>
  3         <!--導入js文件后才可以使用JQuery-->
  4         <script src="http://how2j.cn/study/jquery.min.js"></script>
  5         <script type="text/javascript">
  6             $(function(){
  7                var div=$("#d");
  8 
  9                /*
 10                顯示/隱藏函數
 11                 */
 12                $("#b1").click(function(){
 13                    //隱藏函數
 14                    div.hide();
 15                });
 16                $("#b2").click(function(){
 17                    //顯示函數
 18                    div.show();
 19                });
 20                $("#b3").click(function(){
 21                    //隱藏/顯示切換函數
 22                    div.toggle();
 23                });
 24 
 25                $("#b4").click(function(){
 26                    //延時1ms后顯示
 27                    div.show(1000);
 28                });
 29                $("#b5").click(function(){
 30                    //延時1ms后隱藏
 31                 div.hide(1000);
 32                });
 33                $("#b6").click(function(){
 34                    //延時1ms后隱藏/顯示切換
 35                    div.toggle(1000);
 36                });
 37 
 38 
 39                /*
 40                滑動函數
 41                 */
 42                $("#b7").click(function(){
 43                    //向上滑動函數
 44                    div.slideUp();
 45                });
 46                $("#b8").click(function(){
 47                    //向下滑動函數
 48                    div.slideDown();
 49                });
 50                $("#b9").click(function(){
 51                    //滑動切換函數
 52                    div.slideToggle();
 53                });
 54                $("#b10").click(function(){
 55                    //延時1ms后向上滑動
 56                    div.slideUp(1000);
 57                });
 58                $("#b11").click(function(){
 59                    //延時1ms后向下滑動
 60                    div.slideDown(1000);
 61                });
 62                $("#b12").click(function(){
 63                    //延時1ms后滑動切換
 64                    div.slideToggle(1000);
 65                });
 66 
 67                /*
 68                淡入淡出函數
 69                 */
 70                $("#b13").click(function(){
 71                    //淡入函數
 72                    div.fadeIn();
 73                });
 74                $("#b14").click(function(){
 75                    //淡出函數
 76                    div.fadeOut();
 77                });
 78                $("#b15").click(function(){
 79                    //淡入/淡出切換函數
 80                    div.fadeToggle();
 81                });
 82                $("#b16").click(function(){
 83                    //延時1ms淡入
 84                    div.fadeIn(1000);
 85                });
 86                $("#b17").click(function(){
 87                    //延時1ms淡出
 88                    div.fadeOut(1000);
 89                });
 90                $("#b18").click(function(){
 91                    //延時1ms淡入/淡出切換
 92                    div.fadeToggle(1000);
 93                });
 94 
 95                /*
 96                自定義動畫效果
 97                在使用的div中必須加上：position:relative;
 98                 */
 99                $("#a1").click(function(){
100                    //div的x軸為100px，y軸不變(原點),延時2ms進入到指定坐標
101                    div.animate( {left:'100px'} , 2000);
102                    //div的x軸為0px，y軸為50px,延時2ms進入到指定坐標,並把高設置位50px
103                    div.animate( {left:'0px' , top:'550px' , height:'50px'} , 2000);
104                });
105 
106                /*
107                帶有回調函數
108                自定義動畫效果
109                在使用的div中必須加上：position:relative;
110                 */
111                $("#a1").click(function(){
112                    //div的x軸為100px，y軸不變(原點),延時2ms進入到指定坐標
113                    div.animate( {left:'100px'} , 2000);
114                    //div的x軸為0px，y軸為50px,延時2ms進入到指定坐標,並把高設置位50px
115                    div.animate( {left:'0px' , top:'550px' , height:'50px'} , 2000 , function(){alert("動畫結束");
116                    });
117                });
118             });
119 
120         </script>
121 
122         <style type="text/css">
123             #d{
124                 width: 100px;
125                 height: 300px;
126                 border: 3px solid red;
127                 position:relative;
128             }
129         </style>
130     </head>
131 
132 
133     <body>
134         <button id="b1">隱藏</button>&nbsp;&nbsp;
135         <button id="b2">顯示</button>&nbsp;&nbsp;
136         <button id="b3">隱藏/顯示切換</button>&nbsp;&nbsp;
137         <button id="b4">延時顯示</button>&nbsp;&nbsp;
138         <button id="b5">延時切換</button>&nbsp;&nbsp;
139         <button id="b6">延時顯示/隱藏</button>&nbsp;&nbsp;
140         <br>
141         <button id="b7">向上滑動</button>&nbsp;&nbsp;
142         <button id="b8">向下滑動</button>&nbsp;&nbsp;
143         <button id="b9">滑動切換</button>&nbsp;&nbsp;
144         <button id="b10">延時向上滑動</button>&nbsp;&nbsp;
145         <button id="b11">延時向下滑動</button>&nbsp;&nbsp;
146         <button id="b12">延時滑動切換</button>&nbsp;&nbsp;
147         <br>
148         <button id="b13">淡出</button>&nbsp;&nbsp;
149         <button id="b14">淡入</button>&nbsp;&nbsp;
150         <button id="b15">淡出/淡出切換</button>&nbsp;&nbsp;
151         <button id="b16">延時淡出</button>&nbsp;&nbsp;
152         <button id="b17">延時淡入</button>&nbsp;&nbsp;
153         <button id="b18">延時淡出/淡出切換</button>&nbsp;&nbsp;
154         <br>
155         <button id="a1">自定義動畫效果</button>
156         <br>
157         <br><br>
158         <div id="d">
159             {實驗用的div}
160         </div>
161 
162     </body>
163 
164 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery效果- 顯示和隱藏淡入淡出滑動隱藏 JQuery: JQuery效果（隱藏、顯示、切換，滑動，淡入淡出，以及動畫） JQuery效果-淡入淡出、滑動、動畫 jQuery效果：隱藏、顯示、切換、滑動、淡入淡出、動畫 jQuery中的動畫效果(淡入淡出) Javascript-- jQuery動畫篇(淡入淡出效果) jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換） jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換） jQuery動畫效果之fadeIn,fadeOut（淡入淡出） jQuery淡入淡出效果輪播圖