jquery.appear.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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.3.6
  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[':'].appeared = function(element) {
  44. var $element = $(element);
  45. if (!$element.is(':visible')) {
  46. return false;
  47. }
  48. var window_left = $window.scrollLeft();
  49. var window_top = $window.scrollTop();
  50. var offset = $element.offset();
  51. var left = offset.left;
  52. var top = offset.top;
  53. if (top + $element.height() >= window_top &&
  54. top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
  55. left + $element.width() >= window_left &&
  56. left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
  57. return true;
  58. } else {
  59. return false;
  60. }
  61. };
  62. $.fn.extend({
  63. // watching for element's appearance in browser viewport
  64. appear: function(options) {
  65. var opts = $.extend({}, defaults, options || {});
  66. var selector = this.selector || this;
  67. if (!check_binded) {
  68. var on_check = function() {
  69. if (check_lock) {
  70. return;
  71. }
  72. check_lock = true;
  73. setTimeout(process, opts.interval);
  74. };
  75. $(window).scroll(on_check).resize(on_check);
  76. check_binded = true;
  77. }
  78. if (opts.force_process) {
  79. setTimeout(process, opts.interval);
  80. }
  81. add_selector(selector);
  82. return $(selector);
  83. }
  84. });
  85. $.extend({
  86. // force elements's appearance check
  87. force_appear: function() {
  88. if (check_binded) {
  89. process();
  90. return true;
  91. }
  92. return false;
  93. }
  94. });
  95. })(function() {
  96. if (typeof module !== 'undefined') {
  97. // Node
  98. return require('jquery');
  99. } else {
  100. return jQuery;
  101. }
  102. }());