jquery.appear.js 3.0 KB

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