it-swarm.com.de

jQuery animiert backgroundColor

Ich versuche, eine Änderung in backgroundColor mit jQuery bei 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" (Ungültige Eigenschaft). Das Element, mit dem ich arbeite, ist ein Div.

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

Irgendwelche Ideen?

324
SteveCl

Das Farb-Plugin ist nur 4kb so viel billiger als die UI-Bibliothek. Natürlich solltest du ein anständige Version des Plugins verwenden und nicht ein altes Buggy-Ding , das nicht mit Safari zurechtkommt und abstürzt, wenn die Übergänge zu schnell sind. Da eine verkleinerte Version nicht mitgeliefert wird, könnten Sie verschiedene Kompressoren testen und machen Sie Ihre eigene min version. YUI wird in diesem Fall am besten komprimiert und benötigt nur 2317 Bytes. Da es so klein ist - hier ist es:

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

Ich hatte das gleiche Problem und behebte es mit der jQuery-Benutzeroberfläche. 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>
69
menardmam

Mach es mit CSS3-Übergängen. Die Unterstützung ist großartig (alle modernen Browser, sogar 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

57
volf

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/

31
Emmanuel

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 die Farbe animieren möchten, müssen Sie nur 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);
};

Es ist nur 1,43 KB nach der Komprimierung mit 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)};

Sie können Farben auch mit 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 Eigenschaft shorthand:

/* 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 normalen 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, die aktuelle Animation mit stop () zu stoppen, bevor Sie eine neue Animation starten. Andernfalls blinkt der Effekt eine Weile, wenn Sie zu schnell über das Element fahren.

13
Faraz Kelhini

Sie können 2 Divs verwenden:

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

Wenn die Überblendungen abgeschlossen sind, stellen Sie das Original mit dem neuen BG 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()

11
Peter Ajtai

Für jeden, der das findet. Sie sollten die jQuery-UI-Version besser verwenden, da sie in allen Browsern funktioniert. Das Farb-Plugin hat Probleme mit Safari und Chrome. Das funktioniert nur manchmal.

11
Donny V.

Für den gewünschten Effekt habe ich eine Kombination von CSS-Übergängen mit JQuery verwendet. Offensichtlich werden Browser, die CSS-Übergänge nicht unterstützen, nicht animiert, aber es handelt sich um eine schlanke Option, die für die meisten Browser 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 verwendet den Übergang, um die Hintergrundfarbe zu ändern

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

In diesen Tagen 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]
6
saikat

Ich benutze gerne delay (), um das zu erledigen. Hier ein Beispiel:

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

Dies kann von einer Funktion aufgerufen werden, wobei "element" das Element class/name/etc ist. Das Element wird sofort mit dem Hintergrund # FCFCD8 angezeigt, eine Sekunde lang gedrückt gehalten und dann in #EFEAEA eingeblendet.

5
Andy

Fügen Sie einfach das folgende Snippet unter Ihr jquery-Skript ein und genießen Sie:

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

siehe Beispiel

Referenz für weitere Informationen

4
Darush

Ich bin über diese Seite mit demselben Problem gestolpert, aber mit den folgenden Problemen:

  1. Ich kann keine zusätzliche jQuery-Plug-in-Datei in mein aktuelles Setup aufnehmen.
  2. Ich kann keine großen Codeblöcke einfügen, die ich nicht lesen und überprüfen kann.
  3. Ich habe keinen Zugriff auf das CSS.
  4. Ich hatte kaum Zeit für die Implementierung (es war nur eine visuelle Verbesserung einer Admin-Seite)

Mit dem Obigen schloss das jede Antwort so ziemlich 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 eine temporäre Teilung, die niemals in den Dokumentenfluss eingefügt wird. Ich benutze 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 diese numerische Animation mit der Schrittfunktion auf die Textfarbe mit einer einfachen Hex-Kakluation.

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

Natürlich ist es nur für einfache Farbüberblendungen nützlich, für kompliziertere Farbkonvertierungen müssen Sie eine der obigen Antworten verwenden - oder Ihre eigene Farbüberblendungsmathematik kodieren :)

2
Pebbl

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 ein Beispiel in der Vorschau anzeigen: http://jquerydemo.com/demo/jquery-animate-background-color.aspx

2
mag

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
}]);
1
Orhaan

Wenn Sie Ihren Hintergrund nicht nur mit der jQuery-Kernfunktionalität 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 : ''});
            });
        });
1
user1029978

Versuchen Sie es zu benutzen

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

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");
    });
});
0