自定义动画
// para1: object类型,需要动画的样式key:value对象
// para2: 动画时间,可以缺省,默认为400
// para3: 动画速率函数,可以缺省
// para4: 动画结束的回调函数,可以缺省
// 有些css样式不支持动画
$('div').animate(
{
opacity: 0.5,
height: '400px',
},
2000,
'linear',
function () {
console.log('动画完成了');
}
)
// .delay: 延迟,延迟一定时间
.delay(4000)
.animate(
{
height: '200px',
}
)
animation操作
$('div').hide(); // 隐藏
$('div').show(); // 显示
$('div').toggle();// 显示则隐藏,隐藏则显示
// 渐变 .fadeOut() .fadeIn() .fadeToggle() .fadeTo()
$('div').fadeOut();
$('div').fadeIn();
$('div').fadeToggle();
// para1:动画时间
// para2:透明度终值
// para3: 动画缓释函数,可以缺省,linear 和 swing
// para4:动画结束的回调函数
$('div').fadeTo(1000, 0.5, 'linear', function () {
console.log('动画结束了');
});
// 滑动动画 .slideDown() .slideUp() .slideToggle()
$('div').slideDown();
$('div').slideUp();
$('div').slideToggle();