diff --git a/jquery.appear.js b/jquery.appear.js index ff0b764..83c6d1d 100644 --- a/jquery.appear.js +++ b/jquery.appear.js @@ -15,50 +15,64 @@ var check_lock = false; var defaults = { interval: 250, - force_process: false - } + force_process: false, + left_offset: 0, + top_offset: 0 + }; var $window = $(window); - var $prior_appeared; + var $prior_appeared = {}; + var selector_settings = {}; function process() { check_lock = false; - for (var index = 0; index < selectors.length; index++) { - var $appeared = $(selectors[index]).filter(function() { - return $(this).is(':appeared'); + var s; + for (var index = 0, l = selectors.length; index < l; index++) { + s = selectors[index]; + var $appeared = $(s).filter(function() { + var $t = $(this); + return $t.is(':visible') && is_appeared($t, selector_settings[s].top_offset, selector_settings[s].left_offset); }); $appeared.trigger('appear', [$appeared]); - if ($prior_appeared) { - var $disappeared = $prior_appeared.not($appeared); + if ($prior_appeared[s]) { + var $disappeared = $prior_appeared[s].not($appeared); $disappeared.trigger('disappear', [$disappeared]); } - $prior_appeared = $appeared; + $prior_appeared[s] = $appeared; } } + function is_appeared($element, top_offset , left_offset) { + var window_left = window.pageXOffset || $window.scrollLeft(); + var window_top = window.pageYOffset || $window.scrollTop(); + var offset = $element.offset(); + var left = offset.left; + var top = offset.top; + + if (top + $element.height() >= window_top && + top - (top_offset || $element.data('appear-top-offset') || 0) <= window_top + $window.height() && + left + $element.width() >= window_left && + left - (left_offset || $element.data('appear-left-offset') || 0) <= window_left + $window.width()) { + return true; + } else if (top + $element.height() + (top_offset || $element.data('appear-top-offset') || 0) >= window_top && + !(top >= window_top + (top_offset || $element.data('appear-top-offset') || 0) ) && + left + $element.width() >= window_left && + left - (left_offset || $element.data('appear-left-offset') || 0) <= window_left + $window.width()) { + return true; + } else { + return false; + } + } + // "appeared" custom filter $.expr[':']['appeared'] = function(element) { var $element = $(element); if (!$element.is(':visible')) { return false; } - - var window_left = $window.scrollLeft(); - var window_top = $window.scrollTop(); - var offset = $element.offset(); - var left = offset.left; - var top = offset.top; - - if (top + $element.height() >= window_top && - top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && - left + $element.width() >= window_left && - left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { - return true; - } else { - return false; - } + return is_appeared($element); } $.fn.extend({ @@ -66,6 +80,7 @@ appear: function(options) { var opts = $.extend({}, defaults, options || {}); var selector = this.selector || this; + selector_settings[selector] = opts; if (!check_binded) { var on_check = function() { if (check_lock) { diff --git a/package.json b/package.json new file mode 100644 index 0000000..d8587d7 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "jquery-appear-original", + "title": "jQuery Appear/Disappear", + "description": "It implements a custom 'appear'/'disappear' events which are fired when an element became visible/invisible in the browser view port.", + "keywords": [ + "event", + "appear", + "disappear" + ], + "version": "0.3.3", + "main": "index.js", + "licenses": [ + { + "type": "MIT", + "url": "http://opensource.org/licenses/MIT" + } + ], + "homepage": "https://github.com/morr/jquery.appear", + "demo": "http://morr.github.com/appear.html", + "issues": "https://github.com/morr/jquery.appear/issues", + "peerDependencies": { + "jquery": ">=1.7" + } +}