jQuery 动画队列

动画队列

对一个对象添加多次动画效果时后,添加的动作就会被放入这个动画队列中,等前面的动画完成后再开始执行。

示例

  • 链式的写法应用动画,动画是按照顺序发生
$('button').on('click',function(){
    $('div').hide(600)
            .show(600)
            .slideUp(600)
            .slideDown(600)
            .fadeIn(600)
            .fadeOut(600);
});

这里对一个对象添加了六个动画,六个动画都在动画队列中,按照顺序先后执行;
  • 应用animate()方法设置自定义动画,对象上的动画是同时发生的
$('.animate').on('click',function(){
  $('div').animate({
    opacity: 0.5,
    left: '+=100'
  },500);
});

这里执行动画时,opacity的变化,和向右移动的动画时同时发生的
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。