jQuery animiert backgroundColor

327

Ich versuche, eine Änderung in backgroundColor mithilfe von jQuery beim Mouseover zu animieren.

Ich habe ein Beispiel überprüft und es scheint richtig zu sein. Es funktioniert mit anderen Eigenschaften wie fontSize, aber mit backgroundColor erhalte ich den Fehler "Invalid Property". Das Element, mit dem ich arbeite, ist ein Div.

$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

Irgendwelche Ideen?

SteveCl
quelle
Für jquery 1.4.2 mit jquery-Effekt 1.8 muss ich zugeben, dass die Andrew-Lösung perfekt funktioniert. Siehe seinen Beitrag unten.
Patrick Desjardins
1
Hinweis: Dieses Plugin erkennt die aktuelle Hintergrundfarbe des Elements. Der Chrome-Browser gibt rgba(0, 0, 0, 0)anstelle des erwarteten Leer- / Nullwerts zurück, wenn keine Hintergrundfarbe definiert ist. Um dies zu "beheben", muss das Element eine anfängliche Hintergrundfarbe haben.
Schatten-Assistent ist Ohr für Sie
Die verlinkte Seite scheint defekt zu sein (zumindest die Projektseite und die Demoseite).
Paolo Stefan

Antworten:

333

Das Farb-Plugin ist nur 4 KB so viel billiger als die UI-Bibliothek. Natürlich sollten Sie eine anständige Version des Plugins verwenden und keine fehlerhafte alte Sache, die Safari nicht beherrscht und abstürzt, wenn die Übergänge zu schnell sind. Da keine minimierte Version mitgeliefert wird, können Sie verschiedene Kompressoren testen und Ihre eigene minimale Version erstellen . YUI erhält in diesem Fall die beste Komprimierung und benötigt nur 2317 Bytes. Da es so klein ist, ist es hier:

(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);
Andrew
quelle
2
Okay, gehe zu dem Link, den Andrew vorschlägt. Laden Sie die Datei herunter. Sie müssen es Ihrem Projekt hinzufügen. Sie können immer noch jquery.effects.core in Ihrem Projekt haben, dies wird perfekt funktionieren. Danke für die Antwort. +1
Patrick Desjardins
3
Ich habe das Obige einfach in meine vorhandene 'jquery-ui-1.8.2.min.js'-Datei eingefügt und ... alles hat noch funktioniert :-)
Dave Everitt
7
Ich möchte darauf hinweisen, dass der Autor dieses Plugins im letzten Jahr (2011) eine Version 2 veröffentlicht hat, die viele nette Funktionen enthält, aber für die Grundfunktionalität, nach der diese Bibliothek normalerweise gesucht wird, nicht erforderlich ist. Es ist jetzt 20 + kb groß. Sie können den v1Zweig auswählen , um die alte Version zu erhalten (die immer noch funktioniert), aber viel leichter ist.
Aren
6
FWIW - Sie können die Zuordnungen von Farbe zu RGB im Code entfernen und die Größe weiter reduzieren: raw.github.com/gist/1891361/… . Der Nachteil ist, dass Sie keine Farbnamen für die Animation verwenden können. Sie müssen RGB-Werte verwenden.
Niyaz
4
jQuery 1.8 unterbricht diesen Plug übrigens. curCSS ist nicht mehr in jQuery.
Rich Bradshaw
68

Ich hatte das gleiche Problem und habe es durch Einbeziehen der jQuery-Benutzeroberfläche behoben. Hier ist das komplette Skript:

<!-- 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>
Menardmam
quelle
61

Mach es mit CSS3-Übergängen. Die Unterstützung ist großartig (alle modernen Browser, auch IE). Mit Compass und SASS ist dies schnell erledigt:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

Reines CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

Ich habe einen deutschen Artikel zu diesem Thema geschrieben: http://www.solife.cc/blog/animation-farben-css3-transition.html

volf
quelle
6
Fiddle mit schweben und klicken Übergänge an: jsfiddle.net/K5Qyx
Die Pilafian
30

Bitstorm hat das beste jquery-Farbanimations-Plugin, das ich je gesehen habe. Es ist eine Verbesserung des jquery-Farbprojekts. Es unterstützt auch rgba.

http://www.bitstorm.org/jquery/color-animation/

Emmanuel
quelle
1
Ich kann Ihnen nicht genug dafür danken, dass es 'rgba' unterstützt, was genau das ist, wonach ich gesucht habe
Onimusha
13

Sie können die jQuery-Benutzeroberfläche verwenden, um diese Funktionalität hinzuzufügen. Sie können genau das auswählen, was Sie benötigen. Wenn Sie also Farben animieren möchten, müssen Sie lediglich den folgenden Code einfügen. Ich habe wenn von der neuesten jQuery-Benutzeroberfläche (derzeit 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);
};

Nach dem Komprimieren mit YUI sind es nur 1,43 KB:

$.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)};

Sie können Farben auch mithilfe von CSS3-Übergängen animieren, dies wird jedoch nur von modernen Browsern unterstützt.

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;
  }

Verwenden der Kurzschrift-Eigenschaft:

/* 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;
 }

Im Gegensatz zu regulären Javascript-Übergängen sind CSS3-Übergänge hardwarebeschleunigt und daher flüssiger. Sie können Modernizr verwenden, um herauszufinden, ob der Browser CSS3-Übergänge unterstützt. Wenn dies nicht der Fall ist, können Sie jQuery als Fallback verwenden:

if ( !cssTransitions() ) {
    $(document).ready(function(){
        $(".test").hover(function () {
                $(this).stop().animate({ backgroundColor: "red" },500)
             }, function() {
                 $(this).stop().animate({ backgroundColor: "blue" },500)}    
             );
    }); 
}

Denken Sie daran, stop () zu verwenden, um die aktuelle Animation zu stoppen, bevor Sie eine neue starten. Andernfalls blinkt der Effekt eine Weile, wenn Sie zu schnell über das Element fahren.

Faraz Kelhini
quelle
11

Für alle, die das finden. Verwenden Sie besser die jQuery-UI-Version, da sie in allen Browsern funktioniert. Das Farb-Plugin hat Probleme mit Safari und Chrome. Es funktioniert nur manchmal.

Donny V.
quelle
6
-1 Die neueste Version des Farb-Plugins funktioniert perfekt in Chrome.
Andrew
3
Es ist schwer, zusätzliches Skript
einzuschließen,
11

Sie können 2 Divs verwenden:

Sie können einen Klon darauf legen und das Original ausblenden, während Sie den Klon einblenden.

Wenn die Überblendungen abgeschlossen sind, stellen Sie das Original mit dem neuen Hintergrund wieder her.

$(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 Beispiel


.toggleClass()
.offset()
.fadeIn()
.fadeOut()

Peter Ajtai
quelle
Vielleicht hat es irgendwann funktioniert, zumindest nicht, es scheint nicht das zu tun, was von ihm erwartet wird.
Epeleg
@epeleg - Funktioniert für mich in Mac Chrome. Sie klicken auf das farbige Rechteck und es ändert seine Farbe (2013 - 07 - 15)
Peter Ajtai
Ich weiß nicht wie, aber jetzt funktioniert es tatsächlich auf meinem Windows 7 Chrome. Vielleicht im Zusammenhang mit dem Chrome-Update, das ich gestern gemacht habe ?! sowieso wie gesagt ja es funktioniert jetzt.
Epeleg
8

Ich habe eine Kombination von CSS-Übergängen mit JQuery verwendet, um den gewünschten Effekt zu erzielen. Offensichtlich werden Browser, die keine CSS-Übergänge unterstützen, nicht animiert, aber es ist eine leichte Option, die für die meisten Browser gut funktioniert und für meine Anforderungen eine akzeptable Verschlechterung darstellt.

Abfrage zum Ändern der Hintergrundfarbe:

   $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

CSS mit Übergang zum Ausblenden der Änderung der Hintergrundfarbe

   .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; 
   }
Jimbo Jones
quelle
6

Heutzutage unterstützt das jQuery-Farb-Plugin die folgenden benannten Farben:

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]
рüффп
quelle
1
Könnten Sie bitte die Quelle angeben. Vielen Dank für die Auflistung übrigens.
Shrikant Sharat
Diese Liste stammt aus dem jQuery-Farb-Plugin: plugins.jquery.com/project/color
spoulson
2
-1 Ihre Farbliste bezieht sich auf eine veraltete Version. Die aktuelle Version hat mindestens eine zusätzliche Farbe, die mir aufgefallen ist.
Andrew
5

Ich verwende gerne delay (), um dies zu erreichen. Hier ein Beispiel:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

Dies kann durch eine Funktion aufgerufen werden, wobei "Element" die Elementklasse / Name / etc. Ist. Das Element wird sofort mit dem # FCFCD8-Hintergrund angezeigt, eine Sekunde lang gedrückt gehalten und dann in #EFEAEA eingeblendet.

Andy
quelle
4

Fügen Sie einfach das folgende Snippet unter Ihrem JQuery-Skript hinzu und genießen Sie:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Siehe das Beispiel

Referenz für weitere Informationen

Darush
quelle
Bitte inline die Beispiele, damit sie nicht zu Link-Rot neigen.
Ege Özcan
2

Ich bin mit demselben Problem auf diese Seite gestoßen, aber mit folgenden Problemen:

  1. Ich kann meinem aktuellen Setup keine zusätzliche jQuery-Plugin-Datei hinzufügen.
  2. Es ist mir unangenehm, große Codeblöcke einzufügen, für die ich keine Zeit zum Lesen und Überprüfen habe.
  3. Ich habe keinen Zugriff auf die CSS.
  4. Ich hatte kaum Zeit für die Implementierung (es war nur eine visuelle Verbesserung einer Administrationsseite).

Mit dem oben Gesagten schloss das so ziemlich jede Antwort aus. Da mein Farbverlauf sehr einfach war, habe ich stattdessen den folgenden schnellen Hack verwendet:

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');
      }
    }
  )
;

Das obige erstellt ein temporäres Div, das niemals in den Dokumentenfluss eingefügt wird. Ich verwende dann die in jQuery integrierte Animation, um eine numerische Eigenschaft dieses Elements zu animieren - in diesem Fall width-, die einen Prozentsatz (0 bis 100) darstellen kann. Dann übertrage ich mit der Schrittfunktion diese numerische Animation mit einer einfachen Hex-Berechnung auf die Textfarbe.

Dasselbe hätte mit erreicht werden können setInterval, aber mit dieser Methode können Sie von den Animationsmethoden von jQuery profitieren - wie .stop()- und Sie können easingund verwendenduration .

Offensichtlich ist es nur für einfache Farbüberblendungen von Nutzen. Für kompliziertere Farbkonvertierungen müssen Sie eine der oben genannten Antworten verwenden - oder Ihre eigene Farbüberblendungsmathematik codieren :)

Pebbl
quelle
2

Probier diese:

(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);  

Sie können hier eine Vorschau des Beispiels anzeigen : http://jquerydemo.com/demo/jquery-animate-background-color.aspx

mag
quelle
1

Das ColorBlend-Plug-In macht genau das, was Sie wollen

http://plugins.jquery.com/project/colorBlend

Hier ist mein Highlight-Code

$("#container").colorBlend([{
    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);
Orhaan
quelle
1

Wenn Sie Ihren Hintergrund nicht nur mit der Kernfunktionalität von jQuery animieren möchten, versuchen Sie Folgendes:

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 : ''});
            });
        });
user1029978
quelle
0

Versuche es zu benutzen

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
Anton Rodin
quelle
0

Probier diese:

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

Überarbeiteter Weg mit Effekten:

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});
Mary Daisy Sanchez
quelle