jquery动画效果
显示与隐藏：
注意：任何元素都可以调用hiden()和show()方法；
<script language="javascript">
$(function(){
$("input:first").click(function(){
$("p").hide(); //隐藏
});
$("input:last").click(function(){
$("p").show(); //显示
});
});
</script>
</head>
<body>
<input type="button" value="Hide"> <input type="button" value="Show">
<p>点击按钮，看看效果</p>
<span>一段其它的文字</span>
</body>
渐入渐出：
<script language="javascript">
$(function(){
$("input:first").click(function(){
$("img").hide(3000); //逐渐隐藏
});
$("input:last").click(function(){
$("img").show(1000); //逐渐显示
});
});
</script>
</head>
<body>
<input type="button" value="Hide"> <input type="button" value="Show">
<p><img src="01.jpg"></p>
</body>
另一种渐入渐出：
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function(){
$("img").fadeIn(1000); //逐渐fadeIn
});
$("input:eq(2)").click(function(){
$("img").hide(3000); //逐渐隐藏
});
$("input:eq(3)").click(function(){
$("img").show(1000); //逐渐显示
});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="Hide">
<input type="button" value="Show">
<p><img src="02.jpg"></p>
</body>
幻灯片效果：
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function(){
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function(){
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function(){
$("div").add("img").show(1000);
});
});
</script>
</head>
<body>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
</body>
伸缩导航条：
<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>