jquery.appear.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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.3
  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 process() {
  22. check_lock = false;
  23. for (var index = 0; index < selectors.length; index++) {
  24. var $appeared = $(selectors[index]).filter(function() {
  25. return $(this).is(':appeared');
  26. });
  27. $appeared.trigger('appear', [$appeared]);
  28. if ($prior_appeared) {
  29. var $disappeared = $prior_appeared.not($appeared);
  30. $disappeared.trigger('disappear', [$disappeared]);
  31. }
  32. $prior_appeared = $appeared;
  33. }
  34. }
  35. // "appeared" custom filter
  36. $.expr[':']['appeared'] = function(element) {
  37. var $element = $(element);
  38. if (!$element.is(':visible')) {
  39. return false;
  40. }
  41. var window_left = $window.scrollLeft();
  42. var window_top = $window.scrollTop();
  43. var offset = $element.offset();
  44. var left = offset.left;
  45. var top = offset.top;
  46. if (top + $element.height() >= window_top &&
  47. top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
  48. left + $element.width() >= window_left &&
  49. left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
  50. return true;
  51. } else {
  52. return false;
  53. }
  54. }
  55. $.fn.extend({
  56. // watching for element's appearance in browser viewport
  57. appear: function(options) {
  58. var opts = $.extend({}, defaults, options || {});
  59. var selector = this.selector || this;
  60. if (!check_binded) {
  61. var on_check = function() {
  62. if (check_lock) {
  63. return;
  64. }
  65. check_lock = true;
  66. setTimeout(process, opts.interval);
  67. };
  68. $(window).scroll(on_check).resize(on_check);
  69. check_binded = true;
  70. }
  71. if (opts.force_process) {
  72. setTimeout(process, opts.interval);
  73. }
  74. selectors.push(selector);
  75. return $(selector);
  76. }
  77. });
  78. $.extend({
  79. // force elements's appearance check
  80. force_appear: function() {
  81. if (check_binded) {
  82. process();
  83. return true;
  84. };
  85. return false;
  86. }
  87. });
  88. })(jQuery);