/** * jQuery Blend v1.3 * (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php * WARNING: Heavily edited. */ (function($){ $.fn.blend = function(speed) { // Disable Blend for FireFox 2 because of a bug that does not allow // JavaScript to retrieve the CSS background position. // More info: https://bugzilla.mozilla.org/show_bug.cgi?id=316981 if ($.browser.mozilla && (parseFloat($.browser.version) < 1.9)) return this; $(this).each(function() { var $this = $(this), post_styles = {}, pre_styles = {}, properties = [ 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-position-x', 'background-position-y', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'border-bottom-right-radius', 'border-bottom-left-radius' ]; // Prevent double-blending. if ($this.children('.jsblend').length != 0) return; // Make sure the element to be blended is positioned. if ($this.css('position') != 'absolute') { $this.css({ position: 'relative' }); } // Wrap the contents with a div to keep them on top. if (!$this.hasClass('hover')) { $this.wrapInner('
'); } // Remember the background style before the hover class is applied. $.each(properties, function(i, prop) { pre_styles[prop] = $this.css(prop); }); // Apply the hover class. $this.addClass('hover') // Get all post-hover styles. post_styles.position = 'absolute'; post_styles.top = 0; post_styles.left = 0; post_styles.width = $this.width(); post_styles.height = $this.height(); $.each(properties, function(i, prop) { post_styles[prop] = $this.css(prop); }); // Ugly hack to work around Opera's and IE's incorrect reporting of // background-position when it is set to "center" in CSS. if ($.browser.opera) { var clamp = function(x) { return (x < 0) ? 0 : ((x > 100) ? 100 : x); } var bg_pos = pre_styles['background-position'].split(' '); var width = parseFloat(post_styles.width) + parseFloat(post_styles['padding-right']) + parseFloat(post_styles['padding-left']); var height = parseFloat(post_styles.height) + parseFloat(post_styles['padding-top']) + parseFloat(post_styles['padding-bottom']); post_styles['background-position-x'] = clamp(100 * parseFloat(bg_pos[0]) / width) + '%'; post_styles['background-position-y'] = clamp(100 * parseFloat(bg_pos[1]) / height) + '%'; post_styles['background-position'] = (post_styles['background-position-x'] + ' ' + post_styles['background-position-y']); } else if ($.browser.msie) { var x = parseInt(pre_styles['background-position-x']); var y = parseInt(pre_styles['background-position-y']); if (!isNaN(x) && x != 0) { post_styles['background-position-x'] = 'center'; } if (!isNaN(y) && y != 0) { post_styles['background-position-y'] = 'center'; } post_styles['background-position'] = undefined; } // END of Opera & IE background-position hack. // Create the blending layer, hidden by default. var $hover = $(''); $hover.css(post_styles).css({ opacity: 0 }).appendTo($this); // Force non-hover styles on the original layer. $this.removeClass('hover').addClass('unhover'); // Set up the hovering event handlers. $this.hover(function() { $hover.stop().fadeTo(speed, 1); }, function() { $hover.stop().fadeTo(speed, 0); }); }); return this; }; $.fn.unblend = function() { $(this).each(function() { if ($('.jsblend', this).length == 0) return; $('.jsblend', this).remove(); var html = $(this).children('div:first').remove().html(); $(this).html(html).removeClass('unhover'); }); return this; }; })(jQuery);