jQuery animate backgroundColor
Я пытаюсь анимировать изменение backgroundColor с помощью jQuery при наведении курсора мыши.
Я проверил некоторые примеры, и я, кажется, правильно, он работает с другими свойствами, такими как fontSize, но с backgroundColor я получаю и "недопустимое свойство" JS ошибка.
Элемент, с которым я работаю, - это div.
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
какие идеи?
19 ответов:
цвет плагин только 4kb так намного дешевле, чем библиотека пользовательского интерфейса. Конечно, вы хотите использовать достойную версию плагина, а не какой-то старый багги который не обрабатывает Safari и аварийно завершает работу, когда переходы слишком быстры. Поскольку уменьшенная версия не поставляется, вы можете протестировать различные компрессоры и сделать свой собственный мин версия. YUI получает лучшее сжатие в этом случае требуется только 2317 байт и так как он настолько мал - вот это:
(function (d) { d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) { d.fx.step[e] = function (g) { if (!g.colorInit) { g.start = c(g.elem, e); g.end = b(g.end); g.colorInit = true } g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")" } }); function b(f) { var e; if (f && f.constructor == Array && f.length == 3) { return f } if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) { return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])] } if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) { return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55] } if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) { return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)] } if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) { return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)] } if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) { return a.transparent } return a[d.trim(f).toLowerCase()] } function c(g, e) { var f; do { f = d.css(g, e); if (f != "" && f != "transparent" || d.nodeName(g, "body")) { break } e = "backgroundColor" } while (g = g.parentNode); return b(f) } var a = { aqua: [0, 255, 255], azure: [240, 255, 255], beige: [245, 245, 220], black: [0, 0, 0], blue: [0, 0, 255], brown: [165, 42, 42], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgrey: [169, 169, 169], darkgreen: [0, 100, 0], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkviolet: [148, 0, 211], fuchsia: [255, 0, 255], gold: [255, 215, 0], green: [0, 128, 0], indigo: [75, 0, 130], khaki: [240, 230, 140], lightblue: [173, 216, 230], lightcyan: [224, 255, 255], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightyellow: [255, 255, 224], lime: [0, 255, 0], magenta: [255, 0, 255], maroon: [128, 0, 0], navy: [0, 0, 128], olive: [128, 128, 0], orange: [255, 165, 0], pink: [255, 192, 203], purple: [128, 0, 128], violet: [128, 0, 128], red: [255, 0, 0], silver: [192, 192, 192], white: [255, 255, 255], yellow: [255, 255, 0], transparent: [255, 255, 255] } })(jQuery);
У меня была та же проблема, и я исправил ее, включив jQuery UI. Вот полный скрипт :
<!-- include Google's AJAX API loader --> <script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) --> <script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script> <script type="text/javascript"> $(document).ready(function() { $('#menu ul li.item').hover( function() { $(this).stop().animate({backgroundColor:'#4E1402'}, 300); }, function () { $(this).stop().animate({backgroundColor:'#943D20'}, 100); }); }); </script>
сделайте это с помощью CSS3-переходов. Поддержка отличная (все современные браузеры, даже IE). С компасом и Сасс это быстро делается:
#foo {background:red; @include transition(background 1s)} #foo:hover {background:yellow}чистый CSS:
#foo { background:red; -webkit-transition:background 1s; -moz-transition:background 1s; -o-transition:background 1s; transition:background 1s } #foo:hover {background:yellow}Я написал немецкую статью на эту тему:http://www.solife.cc/blog/animation-farben-css3-transition.html
Bitstorm имеет лучший плагин цветной анимации jquery, который я видел. Это улучшение проекта jQuery color. Он также поддерживает rgba.
вы можете использовать jQuery UI для добавления этой функции. Вы можете захватить только то, что вам нужно, поэтому, если вы хотите анимировать цвет, все, что вам нужно включить, это следующий код. У меня если от последних пользовательского интерфейса jQuery (в настоящее время 1.8.14)
/******************************************************************************/ /****************************** COLOR ANIMATIONS ******************************/ /******************************************************************************/ // override the animation for color styles $.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'], function(i, attr) { $.fx.step[attr] = function(fx) { if (!fx.colorInit) { fx.start = getColor(fx.elem, attr); fx.end = getRGB(fx.end); fx.colorInit = true; } fx.elem.style[attr] = 'rgb(' + Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')'; }; }); // Color Conversion functions from highlightFade // By Blair Mitchelmore // http://jquery.offput.ca/highlightFade/ // Parse strings looking for color tuples [255,255,255] function getRGB(color) { var result; // Check if we're already dealing with an array of colors if ( color && color.constructor == Array && color.length == 3 ) return color; // Look for rgb(num,num,num) if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)]; // Look for rgb(num%,num%,num%) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55]; // Look for #a0b1c2 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)]; // Look for #fff if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)]; // Look for rgba(0, 0, 0, 0) == transparent in Safari 3 if (result = /rgba\(0, 0, 0, 0\)/.exec(color)) return colors['transparent']; // Otherwise, we're most likely dealing with a named color return colors[$.trim(color).toLowerCase()]; } function getColor(elem, attr) { var color; do { color = $.curCSS(elem, attr); // Keep going until we find an element that has color, or we hit the body if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") ) break; attr = "backgroundColor"; } while ( elem = elem.parentNode ); return getRGB(color); };это только 1.43 КБ после сжатия с YUI:
$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};вы также можете анимировать цвета с помощью переходов CSS3, но это поддерживается только современными браузерами.
a.test { color: red; -moz-transition-property: color; /* FF4+ */ -moz-transition-duration: 1s; -webkit-transition-property: color; /* Saf3.2+, Chrome */ -webkit-transition-duration: 1s; -o-transition-property: color; /* Opera 10.5+ */ -o-transition-duration: 1s; -ms-transition-property: color; /* IE10? */ -ms-transition-duration: 1s; transition-property: color; /* Standard */ transition-duration: 1s; } a.test:hover { color: blue; }скорописью свойство:
/* shorthand notation for transition properties */ /* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */ a.test { color: red; -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; -ms-transition: color 1s; transition: color 1s; } a.test { color: blue; }В отличие от обычных переходов javascript, переходы CSS3 являются аппаратно ускоренными и, следовательно, более плавными. Вы можете использовать Modernizr, чтобы узнать, поддерживает ли браузер переходы CSS3, если это не так, то вы можете использовать jQuery в качестве запасного варианта:
if ( !cssTransitions() ) { $(document).ready(function(){ $(".test").hover(function () { $(this).stop().animate({ backgroundColor: "red" },500) }, function() { $(this).stop().animate({ backgroundColor: "blue" },500)} ); }); }Не забудьте использовать stop (), чтобы остановить текущую анимацию перед началом новой в противном случае, когда вы проходите над элементом слишком быстро, эффект продолжает мигать некоторое время.
для тех, кто найти это. Вам лучше использовать версию jQuery UI, потому что она работает во всех браузерах. У цветного плагина есть проблемы с Safari и Chrome. Это работает только иногда.
вы можете использовать 2 ДИВС:
вы можете поместить клон поверх него и выцветать оригинал, пока выцветает клон.
когда затухания будут сделаны, восстановите оригинал с новым bg.
$(function(){ var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset(); // Create clone w other bg and position it on original $elie.toggleClass("class1, class2").appendTo("body") .offset({top: os.top, left: os.left}).hide(); $mytd.mouseover(function() { // Fade original $mytd.fadeOut(3000, function() { $mytd.toggleClass("class1, class2").show(); $elie.toggleClass("class1, class2").hide(); }); // Show clone at same time $elie.fadeIn(3000); }); });jsFiddle пример
я использовал комбинацию CSS-переходов с JQuery для желаемого эффекта; очевидно, браузеры, которые не поддерживают CSS-переходы, не будут анимироваться, но его легкий вариант, который хорошо работает для большинства браузеров, и для моих требований приемлема деградация.
Jquery для изменения цвета фона:
$('.mylinkholder a').hover( function () { $(this).css({ backgroundColor: '#f0f0f0' }); }, function () { $(this).css({ backgroundColor: '#fff' }); } );CSS с помощью перехода к выцветанию фона-изменение цвета
.mylinkholder a { transition: background-color .5s ease-in-out; -moz-transition: background-color .5s ease-in-out; -webkit-transition: background-color .5s ease-in-out; -o-transition: background-color .5s ease-in-out; }
в эти дни плагин jQuery color поддерживает следующие именованные цвета:
aqua:[0,255,255], azure:[240,255,255], beige:[245,245,220], black:[0,0,0], blue:[0,0,255], brown:[165,42,42], cyan:[0,255,255], darkblue:[0,0,139], darkcyan:[0,139,139], darkgrey:[169,169,169], darkgreen:[0,100,0], darkkhaki:[189,183,107], darkmagenta:[139,0,139], darkolivegreen:[85,107,47], darkorange:[255,140,0], darkorchid:[153,50,204], darkred:[139,0,0], darksalmon:[233,150,122], darkviolet:[148,0,211], fuchsia:[255,0,255], gold:[255,215,0], green:[0,128,0], indigo:[75,0,130], khaki:[240,230,140], lightblue:[173,216,230], lightcyan:[224,255,255], lightgreen:[144,238,144], lightgrey:[211,211,211], lightpink:[255,182,193], lightyellow:[255,255,224], lime:[0,255,0], magenta:[255,0,255], maroon:[128,0,0], navy:[0,0,128], olive:[128,128,0], orange:[255,165,0], pink:[255,192,203], purple:[128,0,128], violet:[128,0,128], red:[255,0,0], silver:[192,192,192], white:[255,255,255], yellow:[255,255,0]
Мне нравится использовать delay (), чтобы сделать это, вот пример:
jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);Это может быть вызвано функцией, причем "элемент" является классом элемента/name/etc. Элемент мгновенно появится на фоне #FCFCD8, задержится на секунду, а затем исчезнет в #EFEAEA.
просто добавьте следующий фрагмент ниже вашего сценария jquery и наслаждайтесь:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Я сделал версию, которая поддерживает rgba, на основе версии github. Однако он не будет работать в IE, так как он только делает rgba. http://dl.dropbox.com/u/57502/jquery.color.js
я наткнулся на эту страницу с той же проблемой, но следующие проблемы:
- Я не могу включить дополнительный файл плагина jQuery с моей текущей настройкой.
- мне неудобно вставлять большие блоки кода, которые у меня нет времени читать и проверять.
- у меня нет доступа к CSS.
- у меня почти не было времени для реализации (это было только визуальное улучшение на странице администратора)
С выше это в значительной степени исключало каждый ответ. Учитывая, что мое увядание цвета было очень простым, я использовал следующий быстрый Хак вместо этого:
element .css('color','#FF0000') ; $('<div />') .css('width',0) .animate( {'width':100}, { duration: 3000, step:function(now){ var v = (255 - 255/100 * now).toString(16); v = (v.length < 2 ? '0' : '') + v.substr(0,2); element.css('color','#'+v+'0000'); } } ) ;выше создает временный div, который никогда не помещается в поток документа. Затем я использую встроенную анимацию jQuery для анимации числового свойства этого элемента-в этом случае
width- который может представлять процент (от 0 до 100). Затем, используя функцию step, я передаю эту числовую анимацию в цвет текста с помощью простого шестнадцатеричного кода каклуация.то же самое можно было бы сделать с
setInterval, но с помощью этого метода вы можете извлечь выгоду из методов анимации jQuery-как.stop()- и вы можете использоватьeasingиduration.Obivously он используется только для простых цветовых выцветаний, для более сложных цветовых преобразований вам нужно будет использовать один из приведенных выше ответов - или кодировать свой собственный цвет fade math :)
попробуй это:
(function($) { var i = 0; var someBackground = $(".someBackground"); var someColors = [ "yellow", "red", "blue", "pink" ]; someBackground.css('backgroundColor', someColors[0]); window.setInterval(function() { i = i == someColors.length ? 0 : i; someBackground.animate({backgroundColor: someColors[i]}, 3000); i++; }, 30); })(jQuery);вы можете просмотреть пример здесь:http://jquerydemo.com/demo/jquery-animate-background-color.aspx
ColorBlend плагин делает именно то, что вы хотите
http://plugins.jquery.com/project/colorBlend
вот мой код выделения
$("#container").colorBlend([{ colorList:["white", "yellow"], param:"background-color", cycles: 1, duration: 500 }]);
Если вы не хотите анимировать свой фон, используя только основные функции jQuery, попробуйте следующее:
jQuery(".usercontent").mouseover(function() { jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() { jQuery(this).animate({ backgroundColor: 'white' }, 'normal', 'linear', function() { jQuery(this).css({'background':'none', backgroundColor : ''}); }); });
странно, что вы можете анимировать с помощью перехода CSS3, но не можете сделать это с помощью jQuery. вот жалость :(
попробуйте использовать
-moz-transition: background .2s linear; -webkit-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear;
попробуй это:
jQuery(".usercontent").hover(function() { jQuery(this).animate({backgroundColor:"pink"}, "slow"); },function(){ jQuery(this).animate({backgroundColor:"white"}, "slow"); });пересмотренный способ с эффектами:
jQuery(".usercontent").hover(function() { jQuery(this).fadeout("slow",function(){ jQuery(this).animate({"color","yellow"}, "slow"); }); });
Comments