Witam, potrzebowałem pewnego rozszerzenia do JQuery które pozwalałoby zmienianie backgroundcolor przy używaniu efektu animation(). Znalazłem taki skrypt, jednak pojawiły się nowe problemy, już bardzien dotyczące samego JQuery. Oto mój kawałek kodu:
  1. $(document).ready(function() {
  2. $("a").mouseout(function() {
  3. $(this).animate({
  4. backgroundColor:"#F6F6F6" //co tu wstawic 2
  5. }, 400);
  6. });
  7. });


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

i teraz pytanie, jak po wykonaniu animacji na elemencie 'a' przywrócić mu jego początkowe właściwości? Ma on ustawiony jakiś tam styl a:hover, który po wykonaniu animacji przestaje działać, a właściwie nie działa tylko zmiana background-color, bo np kolor tekstu zmienia się tak jak przed animacją.
Druga rzecz to czy da się zamiast jakiegoś koloru (zaznaczone w moim kodzie) podać początkową wartość tego koloru, tak żeby JQuery wykonywał animację koloru w kierunku pierwszego napotkanego koloru podłoża na którym znajduje się element 'a' ?