本文演示了jQuery的Animate动画效果，包括基本动画、滑动效果、淡入淡出及自定义动画等，展示了如何通过jQuery轻松实现网页动画。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript" src="jquerymini.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//控制注册框动画
$(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框
$("#regbox").slideToggle("slow");//如果隐藏就显示，反之...
return false;
});
//关闭注册框动画
$(".delete").click(function(){//关闭注册框
$("#regbox").animate({top:"-100px",opacity:"hide"},1000).animate({top:"0px"})//在1秒钟里动画向上移动100个像素，然后移动到初始位置
});
//控制登录框动画
$(".loginfont").click(function(){//点击登录按钮时关闭或者打开登录框
$(".loginbox").animate({opacity:"toggle",left:"50px"},1000).animate({left:"10px"},"fast");//如果隐藏则显示，向右移动50像素
return false;
});
//小图标晃动动画
$("#nav").find("img").mouseover(function(){
$(this)
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: 0 });
});
//notice动画
$("#notice").animate({opacity:"show"},000).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).slideUp("slow").slideDown("slow");
setTimeout("$('#siderbar').slideUp('slow').slideDown('slow')",1000);//1秒钟以后折叠然后展开层silderbar
//控制右侧BOX框动画
setTimeout("$('#rightbox').show('slow')",2000);//2秒钟以后显示隐藏层rightbox
//控制右侧BOX框内的DD显示与隐藏
//第一个基本效果
$("#rightbox").find("dt:first").click(function(){
$(this).next().toggle("slow");
});
//第二个滑动效果
$("#rightbox").find("dt:eq(1)").click(function(){
$(this).next().slideToggle("slow");
});
//第三个淡入淡出
$("#rightbox").find("dt:eq(2)").click(function(){
$(this).next().animate({opacity:"toggle"},"slow")
});
//第四个自定义动画，这里的toggle(fn1,fn2)意思是：每次点击时切换要调用的函数fn1,fn2
$("#rightbox").find("dt:last").toggle(function(){
$(this).next().animate({height:"100px"},"slow").animate({height:"toggle"});
$("img",this).attr("src","images/down.png")
},function(){
$(this).next().animate({height:"toggle"}).animate({height:"80px"},"slow");
$("img",this).attr("src","images/up.png")
});
//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，
//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。
$("#rightbox").find("dt:lt(3)").toggle(function(){
$(this).find("img").attr("src","images/down.png")
},function(){
$(this).find("img").attr("src","images/up.png")
});
})
</script>
<style>
* { margin:0; padding:0}
ul { list-style:none}
body{ background:#000; font-size:12px;}
#loginbar {width:100%;height:30px;background-color:#930003;color:#FFFFFF;filter:Alpha(style=1,opacity=100,finishOpacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; }
#loginbar a:link { color:#FFFFFF}
#loginbar a:visited { color:#FFFFFF}
#loginbar a:hover { color:#FFCC00}
#leftbox { width:28%; height:600px; float:left;}
/*right box*/
#rightbox { width:69%; height:575px; background:#930003; border:1px solid #932C00; margin-top:5px;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100); display:none; float:left ; background:#571600; margin-left:5px; padding:5px}
#regbox { width:90%; height:auto; color:#FFFFFF; font-weight:bold; background:#930003; border:1px solid #FFF; border-top:none; margin-top:-3px;z-index:5; position:relative; float:right; padding:5px;display:none}
* html #regbox {margin-top:-1px;}
#regbox input { width:80%}
#regbox .delete { position:absolute; bottom:12px;right:20px; cursor:pointer}
#regbox fieldset { padding:3px; text-align:center; line-height:22px; width:90%; margin:0 auto;}
.mleft { margin-left:10px; color:#FF9900}
.fleft { float:left; width:auto}
.right{ float:right; width:auto}
.fullwidth { width:100%}
.loginbox { display:none; position:relative;}
* html .loginbox { margin-top:3px;}
.submit {width:50px; background:#930003; color:#FFFFFF; font-weight:bold; margin-top:3px;}
* html .submit { margin-top:0}
/*nav*/
#nav { width:auto; height:auto;position:relative; margin-top:3px;}
#nav ul li { list-style:none; display:inline; line-height:30px;}
#nav ul li img { position:relative; cursor:pointer;}
/*notice*/
#notice { width:90%; height:80px;background:#930003; border:1px solid #FFF; position:relative;text-align:center; color:#FFCC00; line-height:25px; float:right; margin:5px 0 5px 0; padding:5px;}
/*Myinfo*/
#siderbar { width:90%; background:#930003; border:1px solid #FFF;height:477px; position:relative;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100);color:#FC0; font-weight:bold; float:right; line-height:22px; padding:5px;}
.photo { float:left; margin-right:5px; margin-bottom:10px;}
.photo img { width:144px; height:192px; border:1px solid #FF9900;}
.clear { clear:both}
.rtitle { background:#999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px;}
.rcontent { width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px;}
#rightbox dl { width:100%; height:auto}
#rightbox dt{ background:#999900; border-left:10px solid #FF9900;border-bottom:1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px; cursor:pointer; position:relative}
#rightbox dt img { position:absolute; right:10px; top:10px;}
#rightbox dd {width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px; background:#000000}
</style>
</head>
<body>
<!--login bar Start-->
<div id="loginbar">
<div class="fleft"><a class="loginfont" href="http://www.baidu.com">登录Demo</a></div>
<div class="fleft loginbox">
<div class="fleft">用户名：<input type="text" /> </div>
<div class="fleft">密 码：<input type="password" /></div>
<div class="fleft"><input type="submit" value="提交" class="submit"/></div>
</div>
<div class="fleft"> <a class="regfont" href="http://www.baidu.com">注册Demo</a></div>
<div class="fleft"><span class="mleft">demo:褪色</span></div>
<div id="nav" class="fleft">
<ul>
<li><img src="images/01.png" /></li>
<li><img src="images/02.png" /></li>
<li><img src="images/03.png" /></li>
<li><img src="images/04.png" /></li>
<li><img src="images/05.png" /></li>
<li><img src="images/06.png" /></li>
<li><img src="images/07.png" /></li>
<li><img src="images/08.png" /></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="leftbox">
<div id="regbox">
<form action="" name="form1">
<fieldset>
<legend>注册信息</legend>
<table width="100%">
<tr><td width="40%">用户名：</td><td><input type="text" /></td></tr>
<tr><td>密 码：</td><td><input type="password" /></td></tr>
<tr><td>提示问题：</td><td><input type="text" /></td></tr>
<tr><td>问题答案：</td><td><input type="text" /></td></tr>
<tr><td colspan="2"><input type="submit" value="提交" class="submit" /></td></tr></table>
</fieldset>
</form>
<img class="delete" src="images/shut.gif" title="关闭" />
</div>
<!--login bar Over-->
<div id="notice">
<h4>本页面为jQuery Animate演示</h4>
<h3>Demo:褪色</h3>
</div>
<!--myinfo-->
<div id="siderbar">
<p>
hello,我是褪色(FFEEDD)，
OK，废话不多说，本页面演示了jQeruy部分动画Animate效果，
这看起来似乎很酷，能让我们的网页更加招人喜爱，不仅如此，这些
看上去很酷的效果对jQuery来说简直是小菜一碟！
由于我太菜了，所以要努力跟大家学习啊，对了，因为没装IE7，所以没有考虑IE7所以不知道在IE7下有什么问题。
</p>
</div>
</div>
<div id="rightbox">
<dl>
<dt>基本动画<img src="images/up.png" /></dt>
<dd>
<ul><li>show()显示隐藏的匹配元素</li>
<li>hide()隐藏显示的元素</li>
<li>toggle()切换元素的可见状态</li>
<li>括号里有两个参数(speed,fn)速度和回调函数,速度有fast,normal,slow三种，fn函数在动画结束后返回的函数命令</li>
</ul>
</dd>
</dl>
<dl>
<dt>滑动效果<img src="images/up.png" /></dt>
<dd>
<ul><li>slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素</li>
<li>slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素</li>
<li>slideToggle()通过高度变(向下增大 or 向上减小)化来切换所有匹配元素的可见性</li>
<li>这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。</li>
</ul>
</dd>
</dl>
<dl>
<dt>淡入淡出<img src="images/up.png" /></dt>
<dd>
<ul><li>fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果--显示</li>
<li>fadeout通过不透明度的变化来实现所有匹配元素的淡入效果--隐藏</li>
<li>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度</li>
<li> 例子：$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度</li>
<li>这个效果没有提供切换的函数，好像只可以在自定义的animate里设置opacity:"toggle",效果是一样的</li>
</ul>
</dd>
</dl>
<dl>
<dt>自定义动画<img src="images/up.png" /></dt>
<dd>
<ul>
<li>用于创建自定义动画的函数</li>
<li>这个我解释不好，核心应该是animate，具体请查看API</li>
<li>//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，</li>
<li>//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript" src="jquerymini.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//控制注册框动画
$(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框
$("#regbox").slideToggle("slow");//如果隐藏就显示，反之...
return false;
});
//关闭注册框动画
$(".delete").click(function(){//关闭注册框
$("#regbox").animate({top:"-100px",opacity:"hide"},1000).animate({top:"0px"})//在1秒钟里动画向上移动100个像素，然后移动到初始位置
});
//控制登录框动画
$(".loginfont").click(function(){//点击登录按钮时关闭或者打开登录框
$(".loginbox").animate({opacity:"toggle",left:"50px"},1000).animate({left:"10px"},"fast");//如果隐藏则显示，向右移动50像素
return false;
});
//小图标晃动动画
$("#nav").find("img").mouseover(function(){
$(this)
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: 0 });
});
//notice动画
$("#notice").animate({opacity:"show"},000).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).slideUp("slow").slideDown("slow");
setTimeout("$('#siderbar').slideUp('slow').slideDown('slow')",1000);//1秒钟以后折叠然后展开层silderbar
//控制右侧BOX框动画
setTimeout("$('#rightbox').show('slow')",2000);//2秒钟以后显示隐藏层rightbox
//控制右侧BOX框内的DD显示与隐藏
//第一个基本效果
$("#rightbox").find("dt:first").click(function(){
$(this).next().toggle("slow");
});
//第二个滑动效果
$("#rightbox").find("dt:eq(1)").click(function(){
$(this).next().slideToggle("slow");
});
//第三个淡入淡出
$("#rightbox").find("dt:eq(2)").click(function(){
$(this).next().animate({opacity:"toggle"},"slow")
});
//第四个自定义动画，这里的toggle(fn1,fn2)意思是：每次点击时切换要调用的函数fn1,fn2
$("#rightbox").find("dt:last").toggle(function(){
$(this).next().animate({height:"100px"},"slow").animate({height:"toggle"});
$("img",this).attr("src","images/down.png")
},function(){
$(this).next().animate({height:"toggle"}).animate({height:"80px"},"slow");
$("img",this).attr("src","images/up.png")
});
//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，
//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。
$("#rightbox").find("dt:lt(3)").toggle(function(){
$(this).find("img").attr("src","images/down.png")
},function(){
$(this).find("img").attr("src","images/up.png")
});
})
</script>
<style>
* { margin:0; padding:0}
ul { list-style:none}
body{ background:#000; font-size:12px;}
#loginbar {width:100%;height:30px;background-color:#930003;color:#FFFFFF;filter:Alpha(style=1,opacity=100,finishOpacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; }
#loginbar a:link { color:#FFFFFF}
#loginbar a:visited { color:#FFFFFF}
#loginbar a:hover { color:#FFCC00}
#leftbox { width:28%; height:600px; float:left;}
/*right box*/
#rightbox { width:69%; height:575px; background:#930003; border:1px solid #932C00; margin-top:5px;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100); display:none; float:left ; background:#571600; margin-left:5px; padding:5px}
#regbox { width:90%; height:auto; color:#FFFFFF; font-weight:bold; background:#930003; border:1px solid #FFF; border-top:none; margin-top:-3px;z-index:5; position:relative; float:right; padding:5px;display:none}
* html #regbox {margin-top:-1px;}
#regbox input { width:80%}
#regbox .delete { position:absolute; bottom:12px;right:20px; cursor:pointer}
#regbox fieldset { padding:3px; text-align:center; line-height:22px; width:90%; margin:0 auto;}
.mleft { margin-left:10px; color:#FF9900}
.fleft { float:left; width:auto}
.right{ float:right; width:auto}
.fullwidth { width:100%}
.loginbox { display:none; position:relative;}
* html .loginbox { margin-top:3px;}
.submit {width:50px; background:#930003; color:#FFFFFF; font-weight:bold; margin-top:3px;}
* html .submit { margin-top:0}
/*nav*/
#nav { width:auto; height:auto;position:relative; margin-top:3px;}
#nav ul li { list-style:none; display:inline; line-height:30px;}
#nav ul li img { position:relative; cursor:pointer;}
/*notice*/
#notice { width:90%; height:80px;background:#930003; border:1px solid #FFF; position:relative;text-align:center; color:#FFCC00; line-height:25px; float:right; margin:5px 0 5px 0; padding:5px;}
/*Myinfo*/
#siderbar { width:90%; background:#930003; border:1px solid #FFF;height:477px; position:relative;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100);color:#FC0; font-weight:bold; float:right; line-height:22px; padding:5px;}
.photo { float:left; margin-right:5px; margin-bottom:10px;}
.photo img { width:144px; height:192px; border:1px solid #FF9900;}
.clear { clear:both}
.rtitle { background:#999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px;}
.rcontent { width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px;}
#rightbox dl { width:100%; height:auto}
#rightbox dt{ background:#999900; border-left:10px solid #FF9900;border-bottom:1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px; cursor:pointer; position:relative}
#rightbox dt img { position:absolute; right:10px; top:10px;}
#rightbox dd {width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px; background:#000000}
</style>
</head>
<body>
<!--login bar Start-->
<div id="loginbar">
<div class="fleft"><a class="loginfont" href="http://www.baidu.com">登录Demo</a></div>
<div class="fleft loginbox">
<div class="fleft">用户名：<input type="text" /> </div>
<div class="fleft">密 码：<input type="password" /></div>
<div class="fleft"><input type="submit" value="提交" class="submit"/></div>
</div>
<div class="fleft"> <a class="regfont" href="http://www.baidu.com">注册Demo</a></div>
<div class="fleft"><span class="mleft">demo:褪色</span></div>
<div id="nav" class="fleft">
<ul>
<li><img src="images/01.png" /></li>
<li><img src="images/02.png" /></li>
<li><img src="images/03.png" /></li>
<li><img src="images/04.png" /></li>
<li><img src="images/05.png" /></li>
<li><img src="images/06.png" /></li>
<li><img src="images/07.png" /></li>
<li><img src="images/08.png" /></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="leftbox">
<div id="regbox">
<form action="" name="form1">
<fieldset>
<legend>注册信息</legend>
<table width="100%">
<tr><td width="40%">用户名：</td><td><input type="text" /></td></tr>
<tr><td>密 码：</td><td><input type="password" /></td></tr>
<tr><td>提示问题：</td><td><input type="text" /></td></tr>
<tr><td>问题答案：</td><td><input type="text" /></td></tr>
<tr><td colspan="2"><input type="submit" value="提交" class="submit" /></td></tr></table>
</fieldset>
</form>
<img class="delete" src="images/shut.gif" title="关闭" />
</div>
<!--login bar Over-->
<div id="notice">
<h4>本页面为jQuery Animate演示</h4>
<h3>Demo:褪色</h3>
</div>
<!--myinfo-->
<div id="siderbar">
<p>
hello,我是褪色(FFEEDD)，
OK，废话不多说，本页面演示了jQeruy部分动画Animate效果，
这看起来似乎很酷，能让我们的网页更加招人喜爱，不仅如此，这些
看上去很酷的效果对jQuery来说简直是小菜一碟！
由于我太菜了，所以要努力跟大家学习啊，对了，因为没装IE7，所以没有考虑IE7所以不知道在IE7下有什么问题。
</p>
</div>
</div>
<div id="rightbox">
<dl>
<dt>基本动画<img src="images/up.png" /></dt>
<dd>
<ul><li>show()显示隐藏的匹配元素</li>
<li>hide()隐藏显示的元素</li>
<li>toggle()切换元素的可见状态</li>
<li>括号里有两个参数(speed,fn)速度和回调函数,速度有fast,normal,slow三种，fn函数在动画结束后返回的函数命令</li>
</ul>
</dd>
</dl>
<dl>
<dt>滑动效果<img src="images/up.png" /></dt>
<dd>
<ul><li>slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素</li>
<li>slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素</li>
<li>slideToggle()通过高度变(向下增大 or 向上减小)化来切换所有匹配元素的可见性</li>
<li>这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。</li>
</ul>
</dd>
</dl>
<dl>
<dt>淡入淡出<img src="images/up.png" /></dt>
<dd>
<ul><li>fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果--显示</li>
<li>fadeout通过不透明度的变化来实现所有匹配元素的淡入效果--隐藏</li>
<li>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度</li>
<li> 例子：$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度</li>
<li>这个效果没有提供切换的函数，好像只可以在自定义的animate里设置opacity:"toggle",效果是一样的</li>
</ul>
</dd>
</dl>
<dl>
<dt>自定义动画<img src="images/up.png" /></dt>
<dd>
<ul>
<li>用于创建自定义动画的函数</li>
<li>这个我解释不好，核心应该是animate，具体请查看API</li>
<li>//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，</li>
<li>//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
