实验4jQuery动画效果.docVIP

实验四 jQuery动画效果 【实验目的】 1、掌握jQuery处理动画效果的方法； 2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法； 3、掌握jQuery自定义动画的定义。 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、实现折叠菜单的效果，效果如图4-1所示。 图4-1 title无标题文档/title style type=text/css .mainleftFAQ { width: 150px; } .admintext11 { padding: 8px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #93cdff; font-family: 华文楷体; font-size: 20px; } .FAQlist { display:none; font-family: 新宋体; font-size: 14px; } .FAQlist a { padding:8px 0px; display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; } .FAQlist a:hover { color:#7fb2f4; background-color:#dfdfdf; text-decoration:underline; } /style script type=text/javascript src=jquery-1.4.2.js/script script language=javascript type=text/javascript $(document).ready(function () { //将二级菜单设置为不可见 $(.FAQlist).hide(); //单击一级菜单触发的事件 $(.bartitleFAQ).click(function () { //将二级菜单全部设置为不可见 $(.FAQlist).hide(); //当前一级菜单的二级菜单设置为可见 $(this).next().show(fast); }) }) /script /head body div class=mainleftFAQ div class=bartitleFAQp class=admintext11服务管理/p/div div class=FAQlist a href= 等待提交/a a href= title= 等待发布/a /div div class=bartitleFAQp class=admintext11更新流程/p/div div class=FAQlist a href= 后台搜索/a a href= 更新流程/a /div div class=bartitleFAQp class=admintext11下载管理/p/div div class=FAQlist a href= 下载/a /div /div /body 2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。其效果如图4-2所示。 图4-2 title无标题文档/title style type=text/css .imge{ position:absolute; top:10px; left:10px;} /style script type=text/javascript src=../jquery-1.4.2.js/script script language=javascript type=text/javascript $(document).ready(functio