highlight.js

(function($) {
  $.fn.highlight = function(options) {
    var $el = $("<div></div>"),
        delay = (options && options["delay"]) || 0;

    var container = $(this)[0];
    if ($(this).parents("table").length) {
      container = $(this).parents("table")[0];
    }

    var offset = {top: 0, left: 0};
    if ($(container).css("position") === "static") {
      offset.top = $(this).offset().top - $(container).offset().top;
      offset.left = $(this).offset().left - $(container).offset().left;
      $(container).css({"position": "relative"});
    }

    $el.
      width($(this).outerWidth()).
      height($(this).outerHeight()).
      css({
        "position": "absolute",
        "top": offset.top,
        "left": offset.left,
        "background-color": "yellow",
        "opacity": "0.15",
        "z-index": "99999"
      }).
      appendTo(container).
      delay(delay).
      fadeOut(1500);
      // queue(function() { $(el).remove(); });
  };

  $.fn.animateIntoView = function(options) {
    var el = this,
        windowHeight = $(window).height(),
        offset = $(el).offset(),
        top = 0;

    if (windowHeight > $(el).height()) {
      top = (windowHeight - $(el).height()) / 2;
    }

    $("html,body").animate({
      scrollTop: offset.top - top,
      scrollLeft: offset.left
    }, $.extend({
      duration: 700
    }, options));
  };

  $.fn.highlightIntoView = function() {
    var el = this,
        windowTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        offset = $(el).offset(),
        belowWindowTop = offset.top > windowTop,
        aboveWindowCenter = offset.top < windowTop + windowHeight / 2;

    if (belowWindowTop && aboveWindowCenter) {
      $(el).highlight();
    } else {
      $(el).animateIntoView({duration: 700});
      $(el).highlight({delay: 700});
    }
  };
})(jQuery);