Jquery Hintergrund animieren

Question

Ist es möglich, die background-color in jQuery zu animieren, weil es nicht funktioniert.

$('#something').animate({ 
    background :"red" 
}, 1000); 

Answer 1

Sie werden ein Plugin benötigen Farbanimationen mit jQuery zu tun:

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

Answer 2

Vom docs,

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

Also, wenn Sie jQuery UI verwenden, können Sie animieren Hintergrundfarben. Stellen Sie nur sicher, dass Sie backgroundColor und nicht background verwenden.

Die color animations plugin für jQuery tut es auch.

anschauliches Beispiel: http://jsfiddle.net/thai/NXejr/2/

Answer 3

Try this:

$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function() { 
     $('#something').css("backgroundColor", "#FF0000"); 
    }); 

Ich habe mit belebter unterschiedlichem Erfolg hatte, aber festgestellt, dass unter Verwendung der integrierten in Callback-Plus jQuery CSS scheint für die meisten Fälle zu arbeiten. Getestet in IE9, FF4, Chrome, mit jQuery 1.5.

Für eine vollständigere Lösung, fügen Sie dieses Plugin:

$(document).ready(function() { 

    $.fn.animateHighlight = function (highlightColor, duration) { 
     var highlightBg = highlightColor || "#FF0000"; 
     var animateMs = duration || 1000; 
     var originalBg = this.css("background-color"); 

     if (!originalBg || originalBg == highlightBg) 
      originalBg = "#FFFFFF"; // default to white 

     jQuery(this) 
      .css("backgroundColor", highlightBg) 
      .animate({ backgroundColor: originalBg }, animateMs, null, function() { 
       jQuery(this).css("backgroundColor", originalBg); 
      }); 
    }; 
}); 

und es wie so nennen:

$('#something').animateHighlight(); 

Answer 4

Sie können CSS3 Übergänge für den gleichen Effekt verwendet werden. Ihre belebter mit

#something { 
    -webkit-transition: background-color 1s linear; 
    transition: background-color 1s linear; 
    background: red; 

} 

Das einzige Problem mit dieser Lösung ist, IE < 10 Unterstützung

Answer 5

Unter Verwendung ähnlicher Syntax (...{background-color :"red"}...) achived werden könnte, erhalte ich die Fehler

SyntaxError: Unexpected token -

konnte ich es funktioniert, indem Sie die CSS-Eigenschaft background-color in einfache Anführungszeichen kapseln:

$('#something').animate({ 
    'background-color' :"red" 
}, 1000); 

Answer 6

Dies ist einfacher Code RGB-Farben mit reinem jQuery zu animieren (und jQuery.Color Plugin nicht verwenden)

var start = [255, 0, 0], end=[255,255,255]; 
$('#element').animate({'aaa': 1}, {step: function(now){ 
    $(this).css('background-color', 'rgb('+ 
     parseInt(start[0] + (end[0]-start[0]) * now) + ',' + 
     parseInt(start[1] + (end[1]-start[1]) * now) + ',' + 
     parseInt(start[2] + (end[2]-start[2]) * now) + ')' 
    ) 
}, complete: function(){$(this).css('aaa', 0)}})