JQuery-动画

动画

显示隐藏

// show(delay, fn)
$('div').show(1000, function(){
    // ... 动画执行完毕后的回调函数
});

$('div').hide(1000, function(){
    // ...
});

// 在显示与隐藏之间切换
$('div').toggle(1000, function(){
    // ...
});

淡入淡出

// fadeIn(delay, fn)
$('div').fadeIn(1000, function(){
    // ... 动画执行完毕后的回调函数
});

$('div').fadeOut(1000, function(){
    // ...
});

$('div').fadeToggle(1000, function(){
    // ...
});

展开收起

// slideDown(delay, fn)
$('div').slideDown(1000, function(){
    // ... 动画执行完毕后的回调函数
});

$('div').slideUp(1000, function(){
    // ...
})

$('div').slideToggle(1000, function(){
    // ...
});

stop / delay

  • stop

    // stop可以进行停止相关动画的操作
    // stop可以接受连个Boolean类型的参数,默认两个参数值都为false
    // 第一个参数用于指定 是否停止所有后续动画,第二个参数用于指定 是否立即完成当前动画
    // 建议在执行动画前先执行stop
    $('.btn').click(function(){
        $('div').stop().slideToggle(1000);
    });
    
  • delay

    // delay用于告诉系统动画的执行延迟时间
    $('.btn').click(function(){
        $('div').slideToggle(1000).delay(1000).slideToggle(1000);
    });
    
posted @ 2019-10-18 20:02  aaCoder  阅读(75)  评论(0编辑  收藏  举报