css-classes.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery.pep - active, start, and ease classes</title>
  6. <!-- Load local jQuery. -->
  7. <script src="../libs/jquery/jquery.js"></script>
  8. <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  9. <!-- Load local lib and tests. -->
  10. <script src="../src/jquery.pep.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13. $('.pep.ease').pep();
  14. $('.pep.no-ease').pep({
  15. shouldEase: false
  16. });
  17. });
  18. </script>
  19. <style type="text/css">
  20. .pep { width: 200px; height: 200px; background: blue; border-radius: 200px; text-align: center;}
  21. .pep-active { border: 10px solid green; }
  22. .pep-start { background: red }
  23. .pep-ease { background: yellow }
  24. </style>
  25. </head>
  26. <body>
  27. green border = 'pep-active' class applied </br>
  28. red background = 'pep-start' class applied </br>
  29. yellow background = 'pep-ease' class applied
  30. <div class="pep ease"></div>
  31. <div class="pep no-ease">no-ease</div>
  32. </body>
  33. </html>