阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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

      目录
      目录