Effect of jquery navigation bar (css selector Control) _ jquery

The effect of jquery navigation bar is mainly for css control.

<P class = "all"> <p class = "m1" jquery00004844839136 = "1"> Title 1 </p> <p class = "m2" jquery00004844839136 = "2"> title 2 </p> <p class = "m3" jquery00004844839136 = "3"> Title 3 </p> <p class = "m4" jquery00004844839136 = "4"> Title 4 </p> <p class = "m5" jquery00004844839136 = "5"> Title 5 </p> <p class = "m6" jquery00004844839136 = "6"> Title 6 </ p> </p> <p> after entering, you can see the effect! </P> <script type = "text/javascript" src =" http://code.jquery.com/jquery-1.4.2.min.js?1.1.23 "> Script <script type =" text/javascript "> $ (document ). ready (function () {myHide () ;}); function myHide () {// alert ("hello"); // register the event $ (". m1 "). bind ('mouseover', m1_mouseover); $ (". m1 "). bind ('mouseout', m1_mouseout); $ (". m2 "). bind ('mouseover', m2_mouseover); $ (". m2 "). bind ('mouseout', m2_mouseout); $ (". m3 "). bind ('mouseover', m3_mouseover); $ (". m3 "). bind ('mouseout', m3_mouseout); $ (". m4 "). bind ('mouseover', m4_mouseover); $ (". m4 "). bind ('mouseout', m4_mouseout); $ (". m5 "). bind ('mouseover', m5_mouseover); $ (". m5 "). bind ('mouseout', m5_mouseout); $ (". m6 "). bind ('mouseover', m6_mouseover); $ (". m6 "). bind ('mouseout', m6_mouseout) ;}; function m1_mouseover () {$ (". m1 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m1_mouseout () {$ (". m1 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast");} function m2_mouseover () {$ (". m2 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m2_mouseout () {$ (". m2 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast");} function m3_mouseover () {$ (". m3 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m3_mouseout () {$ (". m3 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast") ;}function m4_mouseover () {$ (". m4 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m4_mouseout () {$ (". m4 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast") ;}function m5_mouseover () {$ (". m5 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m5_mouseout () {$ (". m5 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast");} function m6_mouseover () {$ (". m6 "). animate ({width: "100px", height: "30px", fontSize: "22px"}, "fast");} function m6_mouseout () {$ (". m6 "). animate ({width: "70px", height: "20px", fontSize: "14px"}, "fast ");} script <style type = "text/css">. m1 ,. m2 ,. m3 ,. m4 ,. m5 ,. m6 {width: 70px; height: 20px; background-color: # cccccc; border: thin solid # 9999ff; font-size: 14px ;}. all {width: 80px; height: 160px; text-align: center ;}</style>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]