一.jQuery动画的三种方式:
1.默认显示和隐藏方式
2.滑动显示和隐藏方式
3.淡入淡出显示和隐藏方式
1. 默认的显示和隐藏方式
(1) show([speed,[easing],[fn]])
如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
(2) hide([speed,[easing],[fn]])
隐藏,如果选择的元素是隐藏的,这个方法将不会改变任何东西。
(3) toggle([speed],[easing],[fn])
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
1. speed:动画的速度,可以自定义值(如:1000)毫秒数,它还有三个预定义的值(“slow”,“normal”, “fast”)
2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
swing:动画执行时效果是 先慢,中间快,最后又慢
linear:动画执行时速度是匀速的
3. fn:在动画完成时执行的函数,每个元素执行一次。滑动显示和隐藏方式
2(1). slideDown([speed],[easing],[fn])
通过高度变化(向下增大)来动态地显示所有匹配的元素。
2(2). slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素
2(3). slideToggle([speed],[easing],[fn])
与toggle功能相同,只是显示的动画效果不同
3.淡入淡出显示和隐藏方式
3(1). fadeIn([speed],[easing],[fn])
淡入效果(渐渐浮现)
3(2). fadeOut([speed],[easing],[fn])
淡出效果(渐渐隐藏)
3(3). fadeToggle([speed,[easing],[fn]])
与toggle功能相同,只是显示的动画效果不同
例如:
if ($("#content>ul>li").is(":hidden")) {
// 显示
$("#content>ul>li").fadeIn(500);
$(this).text("简化☚");
return false;
} else {
// 隐藏
$("#content>ul>li:gt(4)").not(":last").fadeOut(800);
$(this).text("更多");
return false;
}
二.
图书管理分类例题:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul li{
width: 90px;
list-style: none;
float: left;
font-size: 13px;
}
ul li i{
font-family: "楷体";
}
.clear{
clear:both;
}
#main{
width: 300px;
margin: 50px auto;
border: 1px black solid;
}
#head{
width: 300px;
height: 50px;
line-height: 50px;
background-color: darkgray;
}
#head h2{
width: 200px;
float: left;
margin-left: 10px;
line-height: 50px;
font-family: "楷体";
}
#head span{
display: block;
width: 25px;
height: 12.5px;
float: right;
margin-top: 16px;
background: url(img/pic.png);
/*border: 1px solid;*/
margin-right: 5px;
}
#content ul li a{
color: black;
font-family: "楷体";
}
#foot{
float: right;
margin-top: 10px;
margin-right: 10px;
}
#foot a{
color: darkslateblue;
float: right;
font-family: "楷体";
}
#body {
margin: 10px ;
}
.c1{
clear: both;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#pic").click(function() {
var index = $(this).attr("index")
if (index == 0) {
$(this).css("background", "url(img/pic.png)0-12.5px")
$(this).css("margin-top", "28px")
$(this).attr("index", "1")
$("#body").slideUp(600)
} else {
$(this).css("background", "url(img/pic.png)")
$(this).css("margin-top", "16px")
$(this).attr("index", "0")
$("#body").slideDown(600)
}
});
$("#foot>a").click(function() {
if ($("#content>ul>li").is(":hidden")) {
// 显示
$("#content>ul>li").fadeIn(500);
$(this).text("简化☚");
return false;
} else {
// 隐藏
$("#content>ul>li:gt(4)").not(":last").fadeOut(800);
$(this).text("更多");
return false;
}
});
});
</script>
</head>
<body>
<div id="main">
<div id="head">
<h2>图书分类</h2>
<span id="pic" index="0">
</span>
</div>
<div id="body">
<div id="content">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(2350)</i></li>
<li><a href="#">青春</a><i>(1985)</i></li>
<li><a href="#">少儿</a><i>(1102)</i></li>
<li><a href="#">生活</a><i>(2350)</i></li>
<li><a href="#">社科</a><i>(5684)</i></li>
<li><a href="#">管理</a><i>(1256)</i></li>
<li><a href="#">计算机</a><i>(2135)</i></li>
<li><a href="#">教育</a><i>(3120)</i></li>
<li><a href="#">工具书</a><i>(4213)</i></li>
<li><a href="#">引进版</a><i>(1752)</i></li>
<li><a href="#">其他类</a><i>(9872)</i></li>
</ul>
</div>
<div id="foot">
<a href="">简化☚</a>
</div>
<div class="c1">
</div>
</div>
</div>
</body>
</html>