jquery animate实现图片轮换
本文导语: 在jquery中，animate(params,speed,easing,callback) 用于创建自定义动画的函数。 该函数的关键在于指定动画形式及结果样式属性对象。 这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。 而每个...
在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：用来设置图片的透明度。
来看一个例子：
jquery animate图片轮换_脚本学堂_http://www.
#box{
background:green;
height: 30px;
width: 30px;
position: relative;
top:20;
left:100%;
}
$(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;
});
});
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');
});
});
text
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。