API tools faq
paste
Advertisement
metalx1000

Very Basic Animate CSS examples with jQuery

metalx1000
Mar 22nd, 2017
592
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Animation</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.   <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10.  
  11.   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  12.  
  13.   <script>
  14.     $(document).ready(function(){
  15.       //hide elements
  16.       $('.list-group-item').hide();
  17.  
  18.       //loop through each element
  19.       $('.list-group-item').each(function(i,e){
  20.         //set a delay for each element
  21.         $(this).delay(100*i).queue(function(){
  22.           //use variables
  23.           var ani = 'animated bounceInLeft';
  24.           var end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  25.  
  26.           //display element
  27.           $(this).show();
  28.           //animate element and then remove class when animation complete
  29.           $(this).addClass(ani).one(end,function(){
  30.             $(this).removeClass(ani);
  31.           });
  32.         });
  33.       });
  34.     });
  35.   </script>
  36. </head>
  37. <body>
  38.  
  39. <div class="container">
  40.   <h2 class="animated infinite bounce">Basic List Group</h2>
  41.   <div id="list" class="list-group">
  42.     <a class="list-group-item">First item</a>
  43.     <a class="list-group-item">Second item</a>
  44.     <a class="list-group-item">Third item</a>
  45.     <a class="list-group-item">First item</a>
  46.     <a class="list-group-item">Second item</a>
  47.     <a class="list-group-item">Third item</a>
  48.     <a class="list-group-item">First item</a>
  49.     <a class="list-group-item">Second item</a>
  50.     <a class="list-group-item">Third item</a>
  51.     <a class="list-group-item">First item</a>
  52.     <a class="list-group-item">Second item</a>
  53.     <a class="list-group-item">Third item</a>
  54.     <a class="list-group-item">First item</a>
  55.     <a class="list-group-item">Second item</a>
  56.     <a class="list-group-item">Third item</a>
  57.     <a class="list-group-item">First item</a>
  58.     <a class="list-group-item">Second item</a>
  59.     <a class="list-group-item">Third item</a>
  60.     <a class="list-group-item">First item</a>
  61.     <a class="list-group-item">Second item</a>
  62.     <a class="list-group-item">Third item</a>
  63.     <a class="list-group-item">First item</a>
  64.     <a class="list-group-item">Second item</a>
  65.     <a class="list-group-item">Third item</a>
  66.     <a class="list-group-item">First item</a>
  67.     <a class="list-group-item">Second item</a>
  68.     <a class="list-group-item">Third item</a>
  69.     <a class="list-group-item">First item</a>
  70.     <a class="list-group-item">Second item</a>
  71.     <a class="list-group-item">Third item</a>
  72.     <a class="list-group-item">First item</a>
  73.     <a class="list-group-item">Second item</a>
  74.     <a class="list-group-item">Third item</a>
  75.     <a class="list-group-item">First item</a>
  76.     <a class="list-group-item">Second item</a>
  77.     <a class="list-group-item">Third item</a>
  78.     <a class="list-group-item">First item</a>
  79.     <a class="list-group-item">Second item</a>
  80.     <a class="list-group-item">Third item</a>
  81.   </div>
  82. </div>
  83.  
  84. </body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!