用jQuery的animate方法创建动画

作者: jaclon 分类: JS 发布时间: 2010-11-24 10:05 ė 6没有评论

用户jQuery的animate函数创建自定义动画

animate(params,speed,easing,callback)

参数
params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
speed (String|Number): (可选) 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
callback (Function): (可选) 在动画完成时执行的函数

DEMO:

$("p").animate({ left: 50, opacity: 'show' }, 500);

解释:在500毫秒内使p对象从当前状态渐变为距离左边(left)50像素、透明度(opacity)为显示(show)

我们经常会用到滚动新闻,公告之类的,下面就给出例子:

function myscroll()
{
$(".housenews").find("ul:first").animate({
marginTop:"-25px"//li的高度

},
1000,//动画时间,毫秒
function(){//回调函数,将第一个li移到最后
$(this).css({
marginTop:”0″
}).find(“li:first”).appendTo(this)
});
}
var housenews = null
$(document).ready(function() {
$(“#housenews”).hover(
function() {
window.clearInterval(housenews);
},
function(){
housenews = window.setInterval(‘myscroll()’, 3000);
}
);
housenews = setInterval(‘myscroll()’, 3000);
});
<div id=”housenews” class=”housenews”>
<ul>
<li><a href=”#”>用jQuery的animate方法创建动画1</a></li>
<li><a href=”#”>用jQuery的animate方法创建动画2</a></li>
<li><a href=”#”>用jQuery的animate方法创建动画3</a></li>
</ul>

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2010/11/175.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部