插件 jQuery.Animate CSS 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Animate CSS 中文API文档 https://github.com/craigmdennis/animateCSS

Animate CSS jQuery Plugin

A jQuery plugin to dynamically apply Dan Eden’s animate.css animations with callbacks

Code Climate

Getting Started

Bower

Install with Bower bower install animateCSS

Download

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<script>
$(document).ready( function(){
  $('#your-id').animateCSS("fadeIn");
});
</script>

Documentation

{
  infinite: false, // True or False
  animationClass: "animated", // Can be any class
  delay: 0 // Can be any value (in ms)
  duration: 1000 // Can be any value (in ms)
  callback: // Any function
}

When using infinite: true and a delay, the delay will only occur before the first loop, not on every loop.

Examples

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', {delay: 500});

With delay AND callback

$('#your-id').animateCSS('fadeIn', {
  delay: 1000,
  callback: function(){
    console.log('Boom! Animation Complete');
  }
});

With duration (in ms)

$('#your-id').animateCSS('fadeIn', {duration: 3000});

Chain multiple animations

If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.

$('#your-id').animateCSS('fadeInUp', function() {
  console.log('Boom! First animation Complete');
  $(this).animateCSS("fadeOutUp", function(){
    console.log('Boom Boom! Second animation Complete');
  })
});

Offset animations

You can offset animations by using the delay mechanism

$('#your-id').animateCSS('fadeIn');
$('#another-id').animateCSS('fadeIn', {delay:100});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

.js #your-id {
  visibility:hidden;
}
$(window).load( function(){
  $('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
  });
});

Release History

Please consult the official changelog

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了