8.2.1 fadeln()方法与fadeOut()方法
具有改变元素显示与隐藏状态的功能,仅改变元素的透明度。
8.2.2 fadeToggle()方法
fadeToggle()可以动态改变当前元素的透明度，并切换当前元素的可见状态。即如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态。
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切换菜单
$("#menu li:gt(3):not(:last)").fadeToggle();
//更换底部箭头方向
$(this).toggleClass("down");
});
});
</script>
8.2.3 fadeTo()方法
将透明度指定到某一个值，则需要调用fadeTo()方法。
jQuery对象.fadeTo(duration,opacity,[fn]);
8.3 滑入与滑出动画效果
8.3.1 slideDown() 方法与slideUp()方法
slideDown()方法是改变当前元素的高度，由上到下滑入，即高度向下增大；
slideUp()方法是由下到上滑出，即高度向上减小，都使其呈现出一种"滑动"的效果，直到显示当前元素。
jQuery对象.slideDown(duration，[fn]);
8.2.3 slideToggle()方法
通过滑出切换隐藏状态
jQuery对象.slideToggle(duration,[fn]);
<script type="text/javascript">
$(function(){
$(".secondLi").click(function){
$(".secondLi ul").slideToggle(500);
});
});
</script>
8.4 自定义动画
8.4.1 简单的动画
animate()方法可以动态地改变当前元素的各种css属性。
css属性：大小属性（width，height）
边框属性（border-width）
外边距属性（margin）
内边距属性（padding）
定位属性（top，left，bottom，right）
字体属性（font-size）
文本属性（text-indent，letter-spacing，word-spacing）
背景属性（background-position）
透明度（opacity）
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<img src="tmac.jpg"/>
<script type="text/javascript">
$(function(){
$("img):click(function(){
$(this).animate({"width":"280px","height":"280px"},"slow");
});
});
</script>
</body>
8.4.2 移动位置的动画
利用动画效果改变元素在页面中的位置
<head>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
img{
position:absolute;
top:0px;
left:0px;
</style>
</head>
<body>
<img src="tmac.jpg"/>
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate(){
"left":"+=100px",
"top":"+=100px",
"opacity":"0.5"},3000);
}):
});
</script>
</body>
8.4.3 队列中的动画
“队列”动画，是在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，根据animate()方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画的效果便按“队列”的顺序进行展示。
<head>
<style type="text/css">
div{
border:1px solid #069;
width:50px;
height:50px;
font-size:13px;
padding:5px;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).animate({height:100},"slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
});
});
</script>
</head>
<body>
<div>队列中的动画</div>
</body>
8.5 停止动画[stop()]
stop()方法能够结束当前的动画，立即进入到下一个动画。
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function(){
$(".secondLi ul").stop().slideDown(1000);
},function(){
$(".secondLi ul").stop().slideUp(1000);
});
});
</script>
