.animate( properties [, duration ] [, easing ] [, complete ] )
| 值 | 描述 |
|---|---|
| 一个CSS属性和值的对象,动画将根据这组对象移动。 | |
| 一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ） | |
| 一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"） | |
| 在动画完成时执行的函数。 |
实例：
htmlcssjs
<button name="block">出现</button>
<button name="none">消失</button>
<button name="toggle">切换</button> *{
margin: 0;
padding:0;
}
div{
width: 100px;
height: 100px;
background: pink;
margin: 0 auto;
} $('[name="block"]').click(()=>{
$('div').animate( {width : 100} , 2000 , 'linear' , ()=> console.log('出现动画结束了') );
})
// 可以用+= -=在属性原有值得基础上进行增减数值
$('[name="none"]').click(()=>{
$('div').animate( {width : '-=100'} , 2000 , 'linear' , ()=> console.log('消失动画结束了'));
})
$('[name="toggle"]').click(()=>{
// 如果 width 是 0 让 宽是 100
// 如果 width 是 100 让 宽是 0
if( $('div').css('width') === '100px' ){
$('div').animate( {width : 0} , 2000 , 'linear' , ()=> console.log('消失动画结束了'));
}else{
$('div').animate( {width : 100} , 2000 , 'linear' , ()=> console.log('消失动画结束了'));
}
})进阶使用
.animate( properties, options )
| 值 | 描述 |
|---|---|
| 一个CSS属性和值的对象,动画将根据这组对象移动。 | |
| 一组包含动画选项的值的集合。 |
回调函数
提供了每个元素都会调用start、step、progress、complete、done、fail和always回调函数;这被设置为正在动画的DOM元素。如果集合中没有元素，则不会调用回调函数。如果有多个元素被激活，那么回调函数会对每个匹配的元素执行一次，而不是对整个动画执行一次。使用.promise()方法获得一个promise，你可以附加回调函数，对任意大小的动画集(包括0个元素)触发一次。
step()- 每步动画执行后调用的回调函数。
启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（now 和 fx），this是当前正在执行动画的DOM元素集合。
now: 每一步动画属性的数字值
fx: jQuery.fx 原型对象的一个引用，其中包含了多项属性，比如elem 表示前正在执行动画的元素，start和end分别为动画属性的第一个和最后一个的值，prop为进行中的动画属性。
需要注意的是step函数被每个动画元素的每个动画属性调用。例如，给定两个列表项，step函数在动画的每一步触发四次：
htmlcssjs
<div id="clickme">
点我
</div>
<div id="round"></div>
<div class="text"></div> #round{
position: relative;
left: 10px ;
width : 100px ;
height : 100px;
border-radius: 50%;
background-color: red;
} $('#clickme').click(function() {
$('#round').animate({
opacity: .5,
height: '+=105px',
height: 'toggle'
},{step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('.text').append('<div>' + data + '</div>');
}
});
})若要同时将宽度和高度进行swing动画方式和不透明度进行linear动画方式
htmlcssjs
<div id="clickme">
点我
</div>
<div id="round"></div>
<div class="clickme">
点我
</div>
<div class="round"></div>
<div class="text"></div> #round{
position: relative;
left: 10px ;
width : 100px ;
height : 100px;
border-radius: 50%;
background-color: red;
}
.round{
position: relative;
left: 10px ;
width : 100px ;
height : 100px;
border-radius: 50%;
background-color: red;
} // 第一种
$( "#clickme" ).click(function() {
$( "#round" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>动画完成</div>" );
});
});
// 第二种
$( ".clickme" ).click(function() {
$( ".round" ).animate({
width: "toggle",
height: "toggle",
opacity: "toggle"
}, {
duration: 5000,
specialEasing: {
width: "swing",
height: "swing",
opacity: "linear"
},
complete: function() {
$( this ).after( "<div>动画完成</div>" );
}
});
});queue方式
第一个动画是在执行时 width和后续动画一起执行，执行时间是width动画时间或后续动画总计时间取最大值
第二个动画是3个动画依次执行，执行时间是3个动画总计时间
htmlcssjs
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div> div {
background-color: #bca;
width: 200px;
height: 1.1em;
text-align: center;
border: 2px solid green;
margin: 3px;
font-size: 14px;
}
button {
font-size: 14px;
} $( "#go1" ).click(function() {
$( "#block1" )
.animate({
width: "90%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function() {
$( "#block2" )
.animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function() {
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function() {
$( "div" ).css({
width: "",
fontSize: "",
borderWidth: ""
});
});
Comments | NOTHING