Ik probeer een verandering in backgroundColor te animeren met jQuery bij mouseover.
Ik heb een voorbeeld gecontroleerd en ik lijk het goed te hebben, het werkt met andere eigenschappen zoals fontSize, maar met backgroundColor krijg ik een js-fout “Ongeldige eigenschap”.
Het element waarmee ik werk is een div.
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
Enig idee?
Antwoord 1, autoriteit 100%
De kleurenplug-in is slechts 4 kb, dus veel goedkoper dan de UI-bibliotheek. Natuurlijk wil je een fatsoenlijke versievan de plug-in gebruiken en niet een oud ding met foutendat Safari niet aankan en crasht als de overgangen te snel zijn. Aangezien er geen verkleinde versie wordt meegeleverd, is het misschien leuk om verschillende compressoren te testen en uw eigenmin-versie te maken. YUI krijgt in dit geval de beste compressie en heeft slechts 2317 bytes nodig en omdat het zo klein is – hier is het:
(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);
Antwoord 2, autoriteit 21%
Ik had hetzelfde probleem en heb het opgelost door jQuery UI op te nemen. Hier is het volledige script:
<!-- include Google's AJAX API loader -->
<script src="https://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>
Antwoord 3, autoriteit 19%
Doe het met CSS3-overgangen. Ondersteuning is geweldig (alle moderne browsers, zelfs IE). Met Compass en SASS is dit snel gedaan:
#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}
Pure CSS:
#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}
Ik heb een Duits artikel over dit onderwerp geschreven: http://www.solife. cc/blog/animation-farben-css3-transition.html
Antwoord 4, autoriteit 9%
Bitstorm heeft de beste jQuery plug-in voor kleuranimatie die ik heb gezien. Het is een verbetering van het jQuery-kleurenproject. Het ondersteunt ook rgba.
http://www.bitstorm.org/jquery/color-animation/
Antwoord 5, autoriteit 4%
U kunt de gebruikersinterface van jQuery gebruiken om deze functionaliteit toe te voegen. Je kunt precies pakken wat je nodig hebt, dus als je kleuren wilt animeren, hoef je alleen de volgende code op te nemen. Ik heb if van de nieuwste jQuery UI (momenteel 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);
};
Het is slechts 1,43 kb na compressie met 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)};
Je kunt ook kleuren animeren met CSS3-overgangen, maar dit wordt alleen ondersteund door moderne browsers.
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;
}
Verkorte eigenschap gebruiken:
/* 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;
}
In tegenstelling tot reguliere Javascript-overgangen, zijn CSS3-overgangen hardware-versneld en daarom soepeler. U kunt Modernizr gebruiken om erachter te komen of de browser CSS3-overgangen ondersteunt, als dat niet het geval is, kunt u jQuery gebruiken als een uitwijkmogelijkheid:
if ( !cssTransitions() ) {
$(document).ready(function(){
$(".test").hover(function () {
$(this).stop().animate({ backgroundColor: "red" },500)
}, function() {
$(this).stop().animate({ backgroundColor: "blue" },500)}
);
});
}
Vergeet niet om stop() te gebruiken om de huidige animatie te stoppen voordat u een nieuwe start, anders blijft het effect een tijdje knipperen als u het element te snel passeert.
Antwoord 6, autoriteit 3%
Voor iedereen die dit vindt. U kunt beter de jQuery UI-versie gebruiken omdat deze in alle browsers werkt. De kleurenplug-in heeft problemen met Safari en Chrome. Het werkt alleen soms.
Antwoord 7, autoriteit 3%
U kunt 2 div’s gebruiken:
Je zou er een kloon bovenop kunnen zetten en het origineel uitfaden terwijl je de kloon infadet.
Als de vervaging is voltooid, herstelt u het origineel met de nieuwe 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-voorbeeld
.toggleClass()< br>
.offset()
.fadeIn()
.fadeOut()
Antwoord 8, autoriteit 2%
Ik heb een combinatie van CSS-overgangen met JQuery gebruikt voor het gewenste effect; uiteraard zullen browsers die geen CSS-overgangen ondersteunen, niet animeren, maar het is een lichtgewicht optie die goed werkt voor de meeste browsers en voor mijn vereisten is acceptabele degradatie.
Jquery om de achtergrondkleur te wijzigen:
$('.mylinkholder a').hover(
function () {
$(this).css({ backgroundColor: '#f0f0f0' });
},
function () {
$(this).css({ backgroundColor: '#fff' });
}
);
CSS gebruikt overgang om verandering van achtergrondkleur te vervagen
.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;
}
Antwoord 9, autoriteit 2%
Tegenwoordig ondersteunt de jQuery-kleurplug-in de volgende benoemde kleuren:
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]
Antwoord 10
Ik gebruik graag delay() om dit voor elkaar te krijgen, hier is een voorbeeld:
jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);
Dit kan worden aangeroepen door een functie, waarbij “element” het element class/name/etc is. Het element verschijnt onmiddellijk met de #FCFCD8-achtergrond, houd een seconde vast en vervaagt vervolgens in #EFEAEA.
Antwoord 11
Voeg eenvoudig het volgende fragment toe onder uw jQuery-script en geniet:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Antwoord 12
Ik kwam deze pagina tegen met hetzelfde probleem, maar met de volgende problemen:
- Ik kan geen extra jQuery-plug-inbestand toevoegen aan mijn huidige configuratie.
- Ik voel me niet op mijn gemak bij het plakken van grote blokken code die ik niet kan lezen en valideren.
- Ik heb geen toegang tot de css.
- Ik had nauwelijks tijd voor implementatie (het was slechts een visuele verbetering van een beheerderspagina)
Met het bovenstaande sloot dat vrijwel elk antwoord uit. Aangezien mijn kleurvervaging heel eenvoudig was, gebruikte ik in plaats daarvan de volgende snelle hack:
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');
}
}
)
;
Het bovenstaande creëert een tijdelijke div die nooit in de documentstroom wordt geplaatst. Vervolgens gebruik ik de ingebouwde animatie van jQuery om een numerieke eigenschap van dat element te animeren – in dit geval width– die een percentage kan vertegenwoordigen (0 tot 100). Vervolgens zet ik met behulp van de stapfunctie deze numerieke animatie over naar de tekstkleur met een eenvoudige hexadecimale berekening.
Hetzelfde had kunnen worden bereikt met setInterval, maar door deze methode te gebruiken, kunt u profiteren van de animatiemethoden van jQuery – zoals .stop()– en kunt u easingen duration.
Het is duidelijk alleen van nut voor eenvoudige kleurvervaging, voor meer gecompliceerde kleurconversies moet je een van de bovenstaande antwoorden gebruiken – of je eigen kleurvervagingsberekening coderen 🙂
Antwoord 13
Probeer deze:
(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);
u kunt hier een voorbeeld bekijken: http://jquerydemo.com/demo/ jquery-animate-background-color.aspx
Antwoord 14
ColorBlend plug-in doet precies wat u wilt
http://plugins.jquery.com/project/colorBlend
Hier is de my highlight-code
$("#container").colorBlend([{
colorList:["white", "yellow"],
param:"background-color",
cycles: 1,
duration: 500
}]);
Antwoord 15
Als je je achtergrond niet wilt animeren met alleen de kernfunctionaliteit van jQuery, probeer dan dit:
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 : ''});
});
});
Antwoord 16
Probeer het te gebruiken
-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
Antwoord 17
Probeer deze:
jQuery(".usercontent").hover(function() {
jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
jQuery(this).animate({backgroundColor:"white"}, "slow");
});
Herziene manier met effecten:
jQuery(".usercontent").hover(function() {
jQuery(this).fadeout("slow",function(){
jQuery(this).animate({"color","yellow"}, "slow");
});
});
Antwoord 18
De achtergrondkleur wijzigen met een animatie-effect zonder jQueryUI:
selector.css({
backgroundColor: "#555",
transition: "background-color 1.8s"
});