jQuery-动画 | 易学教程

一、内置动画函数

show / hide

div.show(3000)   //在3000毫秒内逐渐显示
div.hide(3000)  //在3000毫秒内逐渐消失
div.toggle(3000)    // 根据当前状态决定是show()还是hide()。

时间以毫秒为单位，但传入'slow'，'fast'这些字符串：

div.show('slow'); // 在0.6秒钟内逐渐显示
从左上角逐渐展开或收缩

slideUp / slideDown

slideUp('slow')  
slideDown('slow')  
slideToggle('slow')

在垂直方向逐渐展开或收缩

fadeIn / fadeOut

fadeOut('slow')  
fadeIn('slow')  
fadeToggle('slow')

淡入淡出

二、自定义动画

div.animate（ { 最终css值 } ，变化时长 ，动画结束后调用函数）
函数可以不传

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('动画已结束');
    // 恢复至初始状态:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

三、串行动画

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，

delay(3000) //暂停3000毫秒

var div = $('#test-animates');

// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小

div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

来源：CSDN

作者：话废.

链接：https://blog.csdn.net/qq_44376432/article/details/104620420

标签

动画

jquery动画