实验四 jQuery动画效果.doc

实验四 jQuery动画效果【实验目的】1、掌握jQuery处理动画效果的方法；2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；3、掌握jQuery自定义动画的定义。【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、实现折叠菜单的效果，效果如图4-1所示。图4-1无标题文档 .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; $(document).ready(function () /将二级菜单设置为不可见 $(.FAQlist).hide(); /单击一级菜单触发的事件 $(.bartitleFAQ).click(function () /将二级菜单全部设置为不可见 $(.FAQlist).hide(); /当前一级菜单的二级菜单设置为可见 $(this).next().show(fast); ) ) 服务管理 等待提交 等待发布 更新流程 后台搜索 更新流程 下载管理 下载 2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。其效果如图4-2所示。图4-2无标题文档 .imgeposition:absolute;top:10px;left:10px; $(document).ready(function () /所有图片隐藏 $(.imge).hide(); /第一张图片淡入 $(.imge).first().fadeIn(); /单击事件（当前图片淡出，下一张图片淡入）/注：最后一张图片的判断 /禁止跳转$(.imge).click(function()var next=$(this).next().length?$(this).next():$(.imge:first); $(this).fadeOut(); next.fadeIn(); return false;); ) 3、实现一组图片的水平滚动，当鼠标悬停时图片停止滚动。效果如图4-3所示。图4-3无标题文档 #scrollerposition:relative;height:150PX;width:460px;overflow:hidden;margin:auto;#imageswidth:800px;#images a img border:0; position:relative; $(document).ready(function () var $wapper=$(#images a img); $wapper.css(left:0); var animator=function(imgblock)imgblock.animate(left:-800,8000,function()$wapper.css(left:450);animator($(this);); animator($wapper); $wapper.hover(function() $wapper.stop(); ,function() animator($wapper); ); ) 4、实现图片的广告页效果，当点击相应的图片索引时，切换显示相应图片。其效果如图4-4所示。图4-4无标题文档$(function() /$(.slider).css(top:-300); $(.num li).mouseover(function()var height=$(.content_right .ad).height();var index=$(this).index();$(.slider).animate(top:-height*index,1000);$(this).addClass(on).siblings().removeClass(on);).eq(0).mouseover();) 12345 【总结与体会】通过本次学习，我学习到：如果在在显示过程中添加动画效果，可以使用show方法。如果要在隐藏元素的过程中添加动画效果并在动画完成后执行某种操作，则通过hide方法来实现。使用fadeIn方法实现淡入效果。当隐藏元素时，可以使用fadeout方法来实现淡出效果。对于处于隐藏状态的元素，使用slideDown方法可