jquery--jquer特殊效果/层级菜单

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquer特殊效果</title>
 9 
10     <style type="text/css">
11         .box{
12             width:200px;
13             height:200px;
14             background-color:gold;
15         }
16     </style>
17 
18     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
19     <script type="text/javascript">
20         $(function(){
21             $('#btn').click(function(){
22                 //$('.box').fadeOut();  //fadeOut()淡出, fadeIn()淡入
23                 //$('.box').fadeToggle('');  //切换淡入淡出
24 
25                 //$('.box').hide();  //hide()隐藏元素, show()显示元素
26                 //$('.box').toggle();   // 依次展示或隐藏某个元素
27 
28                 $('.box').slideUp();   //slideUp()向上卷起, slideDown()向下展开
29                 //$('.box').slideToggle(); //依次展开或卷起某个元素
30             })
31         })
32     </script>
33 </head>
34 <body>
35 
36 <input type="button" name="" value="效果" id="btn">
37 <div class="box"></div>
38 </body>
39 </html>

 

 

 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>层级菜单</title>
  9 
 10         <style type="text/css">
 11             body{
 12                 font-family:'Microsoft Yahei';
 13             }
 14 
 15             body,ul{
 16                 margin:0px;
 17                 padding:0px;
 18             }
 19 
 20             ul{list-style:none;}
 21 
 22             .menu{
 23                 width:200px;
 24                 margin:20px auto 0;
 25             }
 26 
 27             .menu .level1,.menu li ul a{
 28                 display:block;
 29                 width:200px;
 30                 height:30px;
 31                 line-height:30px;
 32                 text-decoration:none;
 33                 background-color:#3366cc;
 34                 color:#fff;
 35                 font-size:16px;
 36                 text-indent:10px;
 37             }
 38 
 39             .menu .level1{
 40                 border-bottom:1px solid #afc6f6;
 41 
 42             }
 43 
 44             .menu li ul a{
 45                 font-size:14px;
 46                 text-indent:20px;
 47                 background-color:#7aa1ef;
 48 
 49             }
 50 
 51             .menu li ul li{
 52                 border-bottom:1px solid #afc6f6;
 53             }
 54 
 55             .menu li ul{
 56                 display:none;
 57             }
 58 
 59             .menu li ul.current{
 60                 display:block;
 61             }
 62 
 63             .menu li ul li a:hover{
 64                 background-color:#f6b544;
 65             }
 66     </style>
 67 
 68     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 69     <script type="text/javascript">
 70         /*
 71         $(function(){
 72             $('.level1').click(function(){
 73                 $(this).next().toggleClass('current');  //切换隐藏和显示current
 74             })
 75         })
 76         */
 77 
 78         /*
 79         $(function(){
 80             $('.level1').click(function(){
 81                 $(this).next().slideToggle('current');  //渐入渐出效果
 82             })
 83         })
 84         */
 85 
 86         $(function(){
 87             $('.level1').click(function(){
 88                 $(this).next().slideDown().parent().siblings().children('ul').slideUp();   //slideUp()向上卷起, slideDown()向下展开
 89             })
 90         })
 91     </script>
 92 </head>
 93 <body>
 94 
 95     <ul class="menu">
 96         <li>
 97             <a href="#" class="level1">水果</a>
 98             <ul class="current">
 99                 <li><a href="#">苹果</a></li>
100                 <li><a href="#">梨子</a></li>
101                 <li><a href="#">葡萄</a></li>
102                 <li><a href="#">火龙果</a></li>
103             </ul>
104         </li>
105         <li>
106             <a href="#" class="level1">海鲜</a>
107             <ul>
108                 <li><a href="#">蛏子</a></li>
109                 <li><a href="#">扇贝</a></li>
110                 <li><a href="#">龙虾</a></li>
111                 <li><a href="#">象拔蚌</a></li>
112             </ul>
113         </li>
114         <li>
115             <a href="#" class="level1">肉类</a>
116             <ul>
117                 <li><a href="#">内蒙古羊肉</a></li>
118                 <li><a href="#">进口牛肉</a></li>
119                 <li><a href="#">野猪肉</a></li>
120             </ul>
121         </li>
122         <li>
123             <a href="#" class="level1">蔬菜</a>
124             <ul>
125                 <li><a href="#">娃娃菜</a></li>
126                 <li><a href="#">西红柿</a></li>
127                 <li><a href="#">西芹</a></li>
128                 <li><a href="#">胡萝卜</a></li>
129             </ul>
130         </li>
131         <li>
132             <a href="#" class="level1">速冻</a>
133             <ul>
134                 <li><a href="#">冰淇淋</a></li>
135                 <li><a href="#">湾仔码头</a></li>
136                 <li><a href="#">海参</a></li>
137                 <li><a href="#">牛肉丸</a></li>
138             </ul>
139         </li>
140 
141     </ul>
142 
143 </body>
144 </html>

posted on 2019-12-21 17:29  cherry_ning  阅读(121)  评论(0)    收藏  举报

导航