标签：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title></title> 5 <style> 6 #u1 { 7 list-style-type: none; 8 margin: 0; 9 padding: 0; 10 } 11 12 #u1 li { 13 float: left; 14 height: 20px; 15 width: 120px; 16 background-color: yellow; 17 /*border:1px solid red;*/ 18 text-align: center; 19 margin: 0; 20 cursor: pointer; 21 } 22 </style> 23 <script src="jquery-1.8.3.js"></script> 24 <script type="text/javascript"> 25 $(function () { 26 //$(‘#dvWar,#dvFarming,#dvLetter‘).hide(); 27 //$(‘#dvNew‘).show(); 28 $(‘#dvView div:gt(0)‘).fadeOut(); 29 30 31 $(‘#u1 li‘).mouseover(function () { 32 //alert($(this).text()); 33 switch ($(this).text()) { 34 //case ‘新闻‘: $(‘#dvWar,#dvFarming,#dvLetter‘).hide(); 35 // $(‘#dvNew‘).show(); break; 36 //case ‘军事‘: $(‘#dvNew,#dvFarming,#dvLetter‘).hide(); 37 // $(‘#dvWar‘).show(); break; 38 //case ‘农业‘: $(‘#dvWar,#dvNew,#dvLetter‘).hide(); 39 // $(‘#c‘).show(); break; 40 //case ‘文学‘: $(‘#dvWar,#dvFarming,#dvNew‘).hide(); 41 // $(‘#dvLetter‘).show(); break; 42 43 case ‘新闻‘: $(‘#dvNew‘).fadeIn(1000).siblings(‘div‘).fadeOut(1000); 44 break; 45 case ‘军事‘: $(‘#dvWar‘).fadeIn(1000).siblings(‘div‘).fadeOut(1000); 46 break; 47 case ‘农业‘: $(‘#dvFarming‘).fadeIn(1000).siblings(‘div‘).fadeOut(1000); 48 break; 49 case ‘文学‘: $(‘#dvLetter‘).fadeIn(1000).siblings(‘div‘).fadeOut(1000); 50 break; 51 } 52 }); 53 }); 54 55 </script> 56 57 </head> 58 <body> 59 <div id="dvView"> 60 <ul id="u1"> 61 <li>新闻</li> 62 <li>军事</li> 63 <li>农业</li> 64 <li>文学</li> 65 </ul> 66 <div id="dvNew" style="height:300px;width:480px;background-color:green;"> 67 68 </div> 69 <div id="dvWar" style="height:300px;width:480px;background-color:pink;"> 70 71 </div> 72 <div id="dvFarming" style="height:300px;width:480px;background-color:plum;"> 73 74 </div> 75 <div id="dvLetter" style="height:300px;width:480px;background-color:blue;"> 76 77 </div> 78 </div> 79 </body> 80 </html>
16jquery学习笔记-------动画----新闻面板案例
标签：
原文地址：http://www.cnblogs.com/clcloveHuahua/p/5128710.html
