web实训知识点04.16

jQuery的淡出淡入：

代码：

 1. <div id="nav">
 2.     <ul>
 3.         <li><a href="#">首页</a></li>
 4.         <li class="navmenu"><a href="#">课程大厅</a>
 5.             <ul>
 6.                 <li><a href="#">web网页实战</a></li>
 7.                 <li><a href="#">服务端技术</a></li>
 8.                 <li><a href="#">Python开发</a></li>
 9.             </ul>
 10.         </li>
 11.         <li class="navmenu"><a href="#">学习中心</a>
 12.             <ul>
 13.                 <li><a href="#">视频学习</a></li>
 14.                 <li><a href="#">交流学习</a></li>
 15.             </ul>
 16.         </li>
 17.         <li><a href="#">经典案例</a></li>
 18.         <li><a href="#">关于我们</a></li>
 19.     </ul>
 20. </div>
 21. <script type="text/javascript">
 22.     $(function(){
 23.         $(".navmenu").mouseover(function(){
 24.             $(this).children("ul").show();
 25.             //$(this).children("ul").css({display:'block'})
 26.         })
 27.         $(".navmenu").mouseout(function(){
 28.             $(this).children("ul").hide();
 29.             //$(this).children("ul").css({display:'none'})
 30.         })
 31.     })
 32.     $('*').css({'margin':'0','padding':'0'});
 33.     $('#nav').css({"background":"#89c6d5","width":"600px","height":"20px","margin":"0 auto"});
 34.     $('ul li').css({"list-style":"none","float":"left","text-align":"center","line-height":"20px","position":"relative"})
 35.     $("#").css({"text-decoration": "none", "color": "#d5931b", "padding": "0 10px", "width": "100px"});
 36.     $('ul li ul').css({"position":"absolute","top":"20px","left":"0"})
 37.     $('ul li ul li').css({"float":"none","width":"100px","background-color":"#a8d584", "margin":"3px 0"})
 38.     $('ul li ul li a').css({"padding":"0"})
 39. </script>

jQuery动画总结：

show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（），slide Window（滑动窗口）