[Summary view] [Print] [Text view]

   1  /*
   2   * jQuery.appear
   3   * http://code.google.com/p/jquery-appear/
   4   *
   5   * Copyright (c) 2009 Michael Hixson
   6   * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
   7  */
   8  (function($) {
   9       
  10      $.fn.appear = function(fn, options) {
  11           
  12          var settings = $.extend({
  13   
  14              //arbitrary data to pass to fn
  15              data: undefined,
  16   
  17              //call fn only on the first appear?
  18              one: true
  19               
  20          }, options);
  21           
  22          return this.each(function() {
  23           
  24              var t = $(this);
  25               
  26              //whether the element is currently visible
  27              t.appeared = false;
  28               
  29              if (!fn) {
  30   
  31                  //trigger the custom event
  32                  t.trigger('appear', settings.data);
  33                  return;
  34              }
  35               
  36              var w = $(window);
  37               
  38              //fires the appear event when appropriate
  39              var check = function() {
  40   
  41                  //is the element hidden?
  42                  if (!t.is(':visible')) {
  43                       
  44                      //it became hidden
  45                      t.appeared = false;
  46                      return;
  47                  }
  48   
  49                  //is the element inside the visible window?
  50                  var a = w.scrollLeft();
  51                  var b = w.scrollTop();
  52                  var o = t.offset();
  53                  var x = o.left;
  54                  var y = o.top;
  55                   
  56                  if (y + t.height() >= b && 
  57                          y <= b + w.height() &&
  58                          x + t.width() >= a && 
  59                          x <= a + w.width()) {
  60   
  61                      //trigger the custom event
  62                      if (!t.appeared) t.trigger('appear', settings.data);
  63                       
  64                  } else {
  65   
  66                      //it scrolled out of view
  67                      t.appeared = false;
  68                  }
  69              };
  70   
  71              //create a modified fn with some additional logic
  72              var modifiedFn = function() {
  73                   
  74                  //mark the element as visible
  75                  t.appeared = true;
  76   
  77                  //is this supposed to happen only once?
  78                  if (settings.one) {
  79   
  80                      //remove the check
  81                      w.unbind('scroll', check);
  82                      var i = $.inArray(check, $.fn.appear.checks);
  83                      if (i >= 0) $.fn.appear.checks.splice(i, 1);
  84                  }
  85   
  86                  //trigger the original fn
  87                  fn.apply(this, arguments);
  88              };
  89               
  90              //bind the modified fn to the element
  91              if (settings.one) t.one('appear', settings.data, modifiedFn);
  92              else t.bind('appear', settings.data, modifiedFn);
  93               
  94              //check whenever the window scrolls
  95              w.scroll(check);
  96               
  97              //check whenever the dom changes
  98              $.fn.appear.checks.push(check);
  99               
 100              //check now
 101              (check)();
 102          });
 103      };
 104       
 105      //keep a queue of appearance checks
 106      $.extend($.fn.appear, {
 107           
 108          checks: [],
 109          timeout: null,
 110   
 111          //process the queue
 112          checkAll: function() {
 113              var length = $.fn.appear.checks.length;
 114              if (length > 0) while (length--) ($.fn.appear.checks[length])();
 115          },
 116   
 117          //check the queue asynchronously
 118          run: function() {
 119              if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
 120              $.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
 121          }
 122      });
 123       
 124      //run checks when these methods are called
 125      $.each(['append', 'prepend', 'after', 'before', 'attr', 
 126                      'removeAttr', 'addClass', 'removeClass', 'toggleClass', 
 127                      'remove', 'css', 'show', 'hide'], function(i, n) {
 128          var old = $.fn[n];
 129          if (old) {
 130              $.fn[n] = function() {
 131                  var r = old.apply(this, arguments);
 132                  $.fn.appear.run();
 133                  return r;
 134              }
 135          }
 136      });
 137       
 138  })(jQuery);