animate() 方法用于创建自定义动画
实例: 点击按钮,实现div向右移动200px。
$('button').click(function(){
$('.div').animate({
left: '200px'});
})
提示:默认的,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
.div{
position: absolute;}
animate() 操作多个属性
$('button').click(function(){
$('.div').animate({
left:'200px',
opacity:'0.8',
width: '100px',
height:'100px'
});
})
animate() 实现多个动画
$('button').click(function(){
var div = $('.div');
div.animate({
height:'300px',opacity:'0.5'},800);
div.animate({
width:'300px',opacity:'0.8'},600);
div.animate({
height:'100px',opacity:'0.6'},500);
div.animate({
width:'100px',opacity:'0.8'},1000);
})