目前在学习Oracle数据库，由于刚接触，学校让练习练习HTML内容，就想起了老师以前提起过的animate方法
animate是jquery的一个方法，这个方法主要功能是能实现比较平滑的动态效果，所以你想做一个简单又不失美观的动态效果不如试试它
下面总结一下以前常用的幻灯片效果实现用的方法：
切换：show(time)/hide(time):刚接触Jquery的时候大家应该用的最多的就是这两个方法，我个人觉得这个方法太丑了，一瞬间消失，或者一瞬间出现
列表滚动：这个多数人会直接使用其css属性做，或者position().left。。。等等方法，也是直接就过去了，总觉得不高大上
fadein()/fadeOut():朦胧感
slipeUp/slipedown()...等等
代码量：以上效果，想要实现，代码量大
下面是我实现的一个幻灯片切换效果：
包括大图片切换、小图列表突出显示、文字跟随小图跑、
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>animate实现幻灯片</title> <link rel="stylesheet" type="text/css" href="animate.css" />
<script type="text/javascript" src="jquery-1.8.3.js">
</script> <script type="text/javascript">
var index=0;
var flag=true;
$(function(){
$(".imgshow li:not(:first)").hide();
$(".text li:not(:first)").hide();
styleMe(".imglist li:eq("+index+")");
change(index);
$(".imgshow").mouseover(function(){
flag=false; });
$(".imgshow").mouseout(function(){
flag=true; });
$(".imglist li").bind({
mouseout:function(){
flag=true;
},mouseover:function(){
flag=false;
index=$(this).index(); change(index);
},click:function(){
flag=false;
styleMe($(this));
index=$(this).index();
change(index);
} }); setInterval(function(){ if(flag){
index=index+1;
if(index==5){
index=0;
}
change(index)
} },4000);
});
//图片切换
function change(index){
//图片 styleMe(".imglist li:eq("+index+")");
$(".imgshow li:eq("+index+")")
.show().animate({opacity:'0.5'},300).animate({opacity:'1'},500)
.siblings()
.hide();
//文本
var left=$(".imglist li:eq("+index+")").position().left+180;
//alert(left);
if(index==4){
//200=ul初始位置180px +padding20px;
//获取有些问题，直接赋值
var width=480; left=left-width;
}
$(".text").stop(true,true);
$(".text").animate({opacity:'0.7',marginLeft:left},700).animate({opacity:'1'},200);
// alert("index:"+index+";left:"+left+";width:"+width);
$(".text li:eq("+index+")")
.show()
.siblings()
.hide(); //$(".text").css("margin-left",left); }
function styleMe(doc){
$(doc).stop(true,true);
$(doc).animate({marginTop:'-25px'},200).siblings().animate({marginTop:'0px'},400);
$(doc).addClass("mouse").siblings().removeClass("mouse");
}
</script>
</head> <body> <div>
<ul class="imgshow">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li> </ul>
<ul class="imglist">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li> </ul>
<ul class="text">
<li>电影十二生肖去景点</li>
<li>美国农庄公路</li>
<li>青山碧水</li>
<li>阿尔卑斯山下美丽的山庄</li>
<li>这是小羊肖恩嘛？太可爱了吧，好想拥有一只</li> </ul> </div> </body>
</html>
css代码：
/*animate*/
*{
margin:0px;
padding:0px;
}
body{
width:100%; }
div{
width:1000px;
margin:auto;
}
ul{
width:1000px;
margin:auto;
list-style:none; }
.imgshow img{
height:600px;
width:1000px; }
.mouse{
/** border-bottom:30px solid green;**/
background-color:#2F2F2F;
}
.imglist{
top:480px;
margin-left:50px;
z-index:;
position:absolute;
}
.imglist li{
float:left;
padding:20px 10px;
display:block; }
.imglist img{
height:60px;
width:100px; }
.text{
width:auto;
top:430px;
margin-left:180px;
z-index:;
position:absolute; }
.text li{
padding:20px 30px;
background-color:#2F2F2F;
color:#ccc;
font-size:14px; }
效果图：
总结：
animate缺点：
每个动画必须演示完才能结束，这就导致如果频繁去使用这个方法，会导致延迟（实际上不是）
优点：
animate支持同一个容器的所有动作可以依次从第一个往下执行，这个特性我最喜欢！
个别缺点解决办法：
延迟可以使用document.stop("容器名");