jquery animate实现图片轮换
在jquery中，animate(params,speed,easing,callback) 用于创建自定义动画的函数。
该函数的关键在于指定动画形式及结果样式属性对象。
这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
而每个属性的值表示这个样式属性到多少时动画结束。
如果是一个数值，样式属性就会从当前的值渐变到指定的值。
如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
callback (Function): (可选) 在动画完成时执行的函数
opacity：用来设置图片的透明度。
来看一个例子：
<head id="Head1" runat="server">
<title>jquery animate图片轮换_脚本学堂_http://www.jbxue.com</title>
<script type="text/javascript" src="JS/alice.js"></script>
<style type="text/css">
#box{
background:green;
height: 30px;
width: 30px;
position: relative;
top:20;
left:100%;
}
</style>
<script>
$(document).ready(function() {
$("div").hover(function() {
$("#box")
.animate({ opacity: "1", left: "400",top:"500",height:"50",width:"50"}, 1200)
.animate({ opacity: "1", top: "20", height: "70", width: "70"}, "1000000")
.animate({ opacity: "1", left: "20",top:"400", height: "100", width: "100" }, "slow")
.animate({ top: "0" }, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
</script>
</head>
<body>
<div id="box">
</div>
<body>
</html>
hover():相当于悬停事件，前面已经说过。
slideUp(speed, callback)：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。（在slideUp()中也可以不需传参数）
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
例如：
1. $("p").slideUp("slow");
2. $("p").slideUp("slow",function(){ alert("Animation Done."); });
slideDown(speed, callback)：和slideUp()用法一样，不同之处为slideDown()是向下增大。
Animate的用法：
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});
<a href=http://www.jbxue.com>
text
</a>
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。
</div>
您可能感兴趣的文章：
jquery animate实现图片轮换
图片轮播插件 Image rotator
jquery 左右轮播图特效代码示例
JQuery 图片滚动轮播示例代码
基于jquery实现图片广告轮换效果代码
jQeury淡入淡出需要注意的问题
jQuery 淡出一个图像到另一个图像的实现代码
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
js轮播图片滚动的实例代码
jquery【插件】图片切换轮播等