jquery.animateFragments.js

// jQuery plugins to focus a fragment
//
// Uses a StackOverflow-like "flashing" effect.
// Degrades gracefully: assumes anchors have a fragment, so
// the scrolling will work without JS.
//
// Written by Ori Peleg
// Copyright (c) 2010 CloudShare, http://www.cloudshare.com/
// Distributed under the MIT license

(function($) { // enable '$' for jQuery

// Usage:
// $('a.some_anchor').click(function (event) {
//   event.preventDefault();
//   $(this).fragmentTarget().scrollAndAnimate({flashBgColor: 'orange'});
// });
$.extend($.fn, {
  fragmentTarget: function() {
    return this.map(function() {
      var href = $(this).attr("href");

      if (!href.substr(0, 1) === '#')
        return; // only affect pure fragment links

      var fragment = href.slice(1); // remove leading '#'

      // find the first element with either the ID or a name attribute matching the fragment
      var result = $('#' + fragment).add('[name=' + fragment + ']');

      // returning the DOM element, map() will wrap the results in a jQuery object
      return result.get(0);
    });
  },

  scrollAndAnimate: function(params) {
    params = params || {};
    return this.each(function() {
      this.scrollIntoView();
      if (params.flashBgColor)
        $(this).flashBackground({ flashBgColor: params.flashBgColor });
    });
  },

  flashBackground: function(params) {
    var dataKey = "flashBackground_originalBgColor";
    return this.each(function() {
      var $this = $(this);
      if (typeof $this.data(dataKey) === "undefined")
        $this.data(dataKey, $this.css("background-color"));

      var originalBgColor = $this.data(dataKey);
      $this.css("background-color", params.flashBgColor).stop().animate({backgroundColor:originalBgColor}, {duration:1000});
    });
  }
});

})(jQuery);
// vim: set et ts=4 sw=4: