| | 1 | /* |
| | 2 | * jQuery Color Animations |
| | 3 | * Copyright 2007 John Resig |
| | 4 | * Released under the MIT and GPL licenses. |
| | 5 | */ |
| | 6 | |
| | 7 | (function(jQuery){ |
| | 8 | |
| | 9 | // We override the animation for all of these color styles |
| | 10 | jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){ |
| | 11 | jQuery.fx.step[attr] = function(fx){ |
| | 12 | if ( fx.state == 0 ) { |
| | 13 | fx.start = getColor( fx.elem, attr ); |
| | 14 | fx.end = getRGB( fx.end ); |
| | 15 | } |
| | 16 | |
| | 17 | fx.elem.style[attr] = "rgb(" + [ |
| | 18 | Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0), |
| | 19 | Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0), |
| | 20 | Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0) |
| | 21 | ].join(",") + ")"; |
| | 22 | } |
| | 23 | }); |
| | 24 | |
| | 25 | // Color Conversion functions from highlightFade |
| | 26 | // By Blair Mitchelmore |
| | 27 | // http://jquery.offput.ca/highlightFade/ |
| | 28 | |
| | 29 | // Parse strings looking for color tuples [255,255,255] |
| | 30 | function getRGB(color) { |
| | 31 | var result; |
| | 32 | |
| | 33 | // Check if we're already dealing with an array of colors |
| | 34 | if ( color && color.constructor == Array && color.length == 3 ) |
| | 35 | return color; |
| | 36 | |
| | 37 | // Look for rgb(num,num,num) |
| | 38 | if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) |
| | 39 | return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])]; |
| | 40 | |
| | 41 | // Look for rgb(num%,num%,num%) |
| | 42 | if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) |
| | 43 | return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55]; |
| | 44 | |
| | 45 | // Look for #a0b1c2 |
| | 46 | if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) |
| | 47 | return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)]; |
| | 48 | |
| | 49 | // Look for #fff |
| | 50 | if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) |
| | 51 | return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)]; |
| | 52 | |
| | 53 | // Otherwise, we're most likely dealing with a named color |
| | 54 | return colors[jQuery.trim(color).toLowerCase()]; |
| | 55 | } |
| | 56 | |
| | 57 | function getColor(elem, attr) { |
| | 58 | var color; |
| | 59 | |
| | 60 | do { |
| | 61 | color = jQuery.curCSS(elem, attr); |
| | 62 | |
| | 63 | // Keep going until we find an element that has color, or we hit the body |
| | 64 | if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") ) |
| | 65 | break; |
| | 66 | |
| | 67 | attr = "backgroundColor"; |
| | 68 | } while ( elem = elem.parentNode ); |
| | 69 | |
| | 70 | return getRGB(color); |
| | 71 | }; |
| | 72 | |
| | 73 | // Some named colors to work with |
| | 74 | // From Interface by Stefan Petre |
| | 75 | // http://interface.eyecon.ro/ |
| | 76 | |
| | 77 | var colors = { |
| | 78 | aqua:[0,255,255], |
| | 79 | azure:[240,255,255], |
| | 80 | beige:[245,245,220], |
| | 81 | black:[0,0,0], |
| | 82 | blue:[0,0,255], |
| | 83 | brown:[165,42,42], |
| | 84 | cyan:[0,255,255], |
| | 85 | darkblue:[0,0,139], |
| | 86 | darkcyan:[0,139,139], |
| | 87 | darkgrey:[169,169,169], |
| | 88 | darkgreen:[0,100,0], |
| | 89 | darkkhaki:[189,183,107], |
| | 90 | darkmagenta:[139,0,139], |
| | 91 | darkolivegreen:[85,107,47], |
| | 92 | darkorange:[255,140,0], |
| | 93 | darkorchid:[153,50,204], |
| | 94 | darkred:[139,0,0], |
| | 95 | darksalmon:[233,150,122], |
| | 96 | darkviolet:[148,0,211], |
| | 97 | fuchsia:[255,0,255], |
| | 98 | gold:[255,215,0], |
| | 99 | green:[0,128,0], |
| | 100 | indigo:[75,0,130], |
| | 101 | khaki:[240,230,140], |
| | 102 | lightblue:[173,216,230], |
| | 103 | lightcyan:[224,255,255], |
| | 104 | lightgreen:[144,238,144], |
| | 105 | lightgrey:[211,211,211], |
| | 106 | lightpink:[255,182,193], |
| | 107 | lightyellow:[255,255,224], |
| | 108 | lime:[0,255,0], |
| | 109 | magenta:[255,0,255], |
| | 110 | maroon:[128,0,0], |
| | 111 | navy:[0,0,128], |
| | 112 | olive:[128,128,0], |
| | 113 | orange:[255,165,0], |
| | 114 | pink:[255,192,203], |
| | 115 | purple:[128,0,128], |
| | 116 | violet:[128,0,128], |
| | 117 | red:[255,0,0], |
| | 118 | silver:[192,192,192], |
| | 119 | white:[255,255,255], |
| | 120 | yellow:[255,255,0] |
| | 121 | }; |
| | 122 | |
| | 123 | })(jQuery); |
| | 124 | |
| | 125 | jQuery(document).ready(function(){ |
| | 126 | |
| | 127 | jQuery(".updated") |
| | 128 | .css( |
| | 129 | { backgroundColor: '#FFFF33' } |
| | 130 | ) |
| | 131 | .animate( |
| | 132 | { backgroundColor: '#CFEBF7' }, 3000 |
| | 133 | ) |
| | 134 | |
| | 135 | }); |