jQuery制作动画与特效
以下内容以《精通JavaScript+jQuery》书中实例为基础，并且稍加改动过
?
1、伸缩菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>toggle(speed)方法</title><style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation > ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation > ul > li > a{display:block;/* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#c11136;color:#FFFFFF;}#navigation > ul > li > a:hover{/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */}/* 子菜单的CSS样式 */#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px;}#navigation ul li ul li{border-top:1px solid #ED9F9F;}#navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li:has(ul)").find("ul").hide();//一开始全部隐藏$("li:has(ul)").find("ul").prev().click(function(e){//当点到href的时候if(this == e.target){/**原始方法if($(this).next().is(":hidden")){//$("li:has(ul)").find("ul").hide();$(this).next().show();}else{$(this).next().hide();}*/$("li:has(ul)").find("ul").hide();//交替变化$(this).next().toggle(500,function(){//动画完成后的回调函数//alert(111);});//渐变效果toggle(500)，500是毫秒，不加500是直接变没}});});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a> <ul> <li><a href="#">Lastest News</a></li> <li><a href="#">All News</a></li> </ul> </li><li><a href="#">Sports</a> <ul> <li><a href="#">Basketball</a></li> <li><a href="#">Football</a></li> <li><a href="#">Volleyball</a></li> </ul> </li><li><a href="#">Weather</a> <ul> <li><a href="#">Today's Weather</a></li> <li><a href="#">Forecast</a></li> </ul> </li><li><a href="#">Contact Me</a></li></ul></div></body></html>?2、元素显隐的渐入渐出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>fadeTo()方法</title><style type="text/css"><!--img{border:1px solid #000000;}input{border:1px solid #000000;font-size:13px; padding:2px;font-family:Arial, Helvetica, sans-serif;background-color:#FFFFFF;color:#000000;}p{padding:5px;border:1px solid #000000;/* 添加边框，利于观察效果 */}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("input:eq(0)").click(function(){$("img").hide(3000);});$("input:eq(1)").click(function(){$("img").show(2000);});$("input:eq(2)").click(function(){$("img").fadeOut(2000);});$("input:eq(3)").click(function(){$("img").fadeIn(2000);});$("input:eq(4)").click(function(){$("img").fadeTo(1000,0.5);});$("input:eq(5)").click(function(){$("img").fadeTo(1000,0.0);});$("input:eq(6)").click(function(){$("img").slideUp(1000);});$("input:eq(7)").click(function(){$("img").slideDown(1000);});});</script></head><body><input type="button" value="Hide"><input type="button" value="Show"><input type="button" value="FadeOut"><input type="button" value="FadeIn"><input type="button" value="FadeTo 0.5"><input type="button" value="FadeTo 0"><input type="button" value="SlideUp"><input type="button" value="SlideDown"><p><img src="03.jpg"></p></body></html>?3、制作伸缩导航条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>伸缩的导航条</title><style type="text/css"><!--body{padding:0px; margin:0px;background:url(bg3.jpg) no-repeat;}#wrapper{min-height:600px;}#navigation{position:absolute;top:0px; left:0px;margin:0px; padding:0px;width:120px; list-style:none;}#navigation li{position:relative;float:left;margin:0px; padding:0px;height:50px; width:120px;}#navigation li a{position:absolute;display:block;top:0px; left:0px;height:50px; width:120px;line-height:50px;text-align:center;color:#FFFFFF;}#navigation .nav0 a{background:#F50065;}#navigation .nav1 a{background:#D60059;}#navigation .nav2 a{background:#B0004A;}#navigation .nav3 a{background:#F26B00;}#navigation .nav4 a{background:#D75F00;}#navigation .nav5 a{background:#B24F00;}#navigation .nav6 a{background:#6E8F00;}#navigation .nav7 a{background:#607D00;}#navigation .nav8 a{background:#496100;}#navigation .nav9 a{background:#007f9f;}#navigation .nav10 a{background:#006b87;}#navigation .nav11 a{background:#005065;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("#navigation li").each(function(){if(this.className.indexOf("current_page") == -1){//不是当前页$("a",this).css("left","-120px");//隐藏到左面$(this).hover(function(){$("a",this).animate({left:"0px"},"fast");//鼠标放上时显示},function(){$("a",this).animate({left:"-120px"},"fast");//鼠标移开时隐藏});}});});</script></head><body><div id="wrapper"><ul id="navigation"><li href="#">资源下载</a></li><li href="#">相册</a></li><li href="#">一起走到</a></li><li href="#">从明天起</a></li><li href="#">纸飞机</a></li><li href="#">下一站</a></li> <li href="#">门</a></li> <li href="#">人文知识</a></li> <li href="#">标签记录</a></li> <li href="#">友情链接</a></li> <li href="#">联系我们</a></li></ul></div></body></html>?