animation.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*=========================================================================================
  2. File Name: animation.js
  3. Description: Theme Component animations js
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. (function(window, document, $) {
  11. 'use strict';
  12. // Button Animations
  13. $('.buttonAnimation').each(function(){
  14. $(this).hover( function(){
  15. var data = $(this).attr('data-animation');
  16. $(this).addClass('animated '+data);
  17. }, function(){
  18. var data = $(this).attr('data-animation');
  19. $(this).removeClass('animated '+data);
  20. });
  21. });
  22. // Collapse Animations
  23. $('.collapseAnimation').each(function(){
  24. $(this).on("click", function(){
  25. var data = $(this).attr('data-animation'),
  26. href = $(this).attr('href');
  27. $(href).addClass('animated '+data);
  28. });
  29. });
  30. // Alert Animations
  31. $('.alertAnimation').each(function(){
  32. $(this).on("click", function(){
  33. var data = $(this).attr('data-animation');
  34. $(this).parent('.alert').addClass('animated '+data);
  35. $(this).parent('div').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
  36. function (e) {
  37. $('div').removeClass('animated '+data);
  38. });
  39. });
  40. });
  41. // Callout Animations
  42. $('.calloutAnimation').each(function(){
  43. $(this).on("click", function(){
  44. var data = $(this).attr('data-animation');
  45. $(this).parent('div').addClass('animated '+data);
  46. $(this).parent('div').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
  47. function (e) {
  48. $('div').removeClass('animated '+data);
  49. });
  50. });
  51. });
  52. // Card Animation
  53. $('.cardAnimation .card').appear();
  54. $(document).on("appear", '[data-appear="appear"]', function() {
  55. var $item = $(this),
  56. animate = $item.data("animation");
  57. if ($item.hasClass('appear-no-repeat')) return;
  58. $item.addClass('animated ' + animate);
  59. });
  60. $(document).on("disappear", '[data-appear="appear"]', function() {
  61. var $item = $(this),
  62. animate = $item.data("animation");
  63. if ($item.hasClass('appear-no-repeat')) return;
  64. $item.removeClass('animated ' + animate);
  65. });
  66. })(window, document, jQuery);