jquery.appear.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. /*
  2. * jQuery appear plugin
  3. *
  4. * Copyright (c) 2012 Andrey Sidorov
  5. * licensed under MIT license.
  6. *
  7. * https://github.com/morr/jquery.appear/
  8. *
  9. * Version: 0.4
  10. */
  11. (function($) {
  12. var selectors = [];
  13. var check_binded = false;
  14. var check_lock = false;
  15. var defaults = {
  16. interval: 250,
  17. force_process: false
  18. };
  19. var $window = $(window);
  20. var $prior_appeared = [];
  21. function appeared(selector) {
  22. return $(selector).filter(function() {
  23. return $(this).is(':appeared');
  24. });
  25. }
  26. function process() {
  27. check_lock = false;
  28. for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
  29. var $appeared = appeared(selectors[index]);
  30. $appeared.trigger('appear', [$appeared]);
  31. if ($prior_appeared[index]) {
  32. var $disappeared = $prior_appeared[index].not($appeared);
  33. $disappeared.trigger('disappear', [$disappeared]);
  34. }
  35. $prior_appeared[index] = $appeared;
  36. }
  37. }
  38. function add_selector(selector) {
  39. selectors.push(selector);
  40. $prior_appeared.push();
  41. }
  42. // ":appeared" custom filter
  43. $.expr.pseudos.appeared = $.expr.createPseudo(function(arg) {
  44. return function(element) {
  45. var $element = $(element);
  46. if (!$element.is(':visible')) {
  47. return false;
  48. }
  49. var window_left = $window.scrollLeft();
  50. var window_top = $window.scrollTop();
  51. var offset = $element.offset();
  52. var left = offset.left;
  53. var top = offset.top;
  54. if (top + $element.height() >= window_top &&
  55. top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
  56. left + $element.width() >= window_left &&
  57. left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
  58. return true;
  59. } else {
  60. return false;
  61. }
  62. };
  63. });
  64. $.fn.extend({
  65. // watching for element's appearance in browser viewport
  66. appear: function(selector, options) {
  67. $.appear(this, options);
  68. return this;
  69. }
  70. });
  71. $.extend({
  72. appear: function(selector, options) {
  73. var opts = $.extend({}, defaults, options || {});
  74. if (!check_binded) {
  75. var on_check = function() {
  76. if (check_lock) {
  77. return;
  78. }
  79. check_lock = true;
  80. setTimeout(process, opts.interval);
  81. };
  82. $(window).scroll(on_check).resize(on_check);
  83. check_binded = true;
  84. }
  85. if (opts.force_process) {
  86. setTimeout(process, opts.interval);
  87. }
  88. add_selector(selector);
  89. },
  90. // force elements's appearance check
  91. force_appear: function() {
  92. if (check_binded) {
  93. process();
  94. return true;
  95. }
  96. return false;
  97. }
  98. });
  99. })(function() {
  100. if (typeof module !== 'undefined') {
  101. // Node
  102. return require('jquery');
  103. } else {
  104. return jQuery;
  105. }
  106. }());