jQuery动画animate方法使用介绍

2020-05-22 16:09:36易采站长站整理

$(“#go”).click(function(){
$(“#block”).animate({
width: “90%”,
height: “100%”,
fontSize: “10em”,
borderWidth: 10
}, 1000 );
});

描述:
让指定元素左右移动
HTML 代码:

$(“#right”).click(function(){
$(“.block”).animate({left: ‘+50px’}, “slow”);
});
$(“#left”).click(function(){
$(“.block”).animate({left: ‘-50px’}, “slow”);
});

描述:
在600毫秒内切换段落的高度和透明度
jQuery 代码:

$(“p”).animate({
height: ‘toggle’, opacity: ‘toggle’
}, “slow”);

描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:

$(“p”).animate({
left: 50, opacity: ‘show’
}, 500);

描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:

$(“p”).animate({
opacity: ‘show’
}, “slow”, “easein”);