jQuery制造动画与特效 _Web前端

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 class="nav0 current_page"><a href="#">我的日志</a></li>
		<li class="nav1"><a title="资源下载" href="#">资源下载</a></li>
		<li class="nav2"><a title="相册" href="#">相册</a></li>
		<li class="nav3"><a title="一起走到" href="#">一起走到</a></li>
		<li class="nav4"><a title="从明天起" href="#">从明天起</a></li>
		<li class="nav5"><a title="纸飞机" href="#">纸飞机</a></li>
		<li class="nav6"><a title="下一站" href="#">下一站</a></li>
        <li class="nav7"><a title="门" href="#">门</a></li>
        <li class="nav8"><a title="人文知识" href="#">人文知识</a></li>
        <li class="nav9"><a title="标签记录" href="#">标签记录</a></li>
        <li class="nav10"><a title="友情链接" href="#">友情链接</a></li>
        <li class="nav11"><a title="联系我们" href="#">联系我们</a></li>
	</ul>
</div>
</body>
</html>