Jquery fond animer

Est-il possible d'animer le background-color en jQuery, car il n'est pas de travail.

$('#something').animate({
    background :"red"
}, 1000);
En fait comment puis-je changer le fond d'un div en douceur??
Si vous voulez faire un avenant à votre question, vous pouvez le modifier plutôt que de faire des commentaires sur elle. Cliquez simplement sur le edit lien près du coin inférieur gauche de votre question.
Il est intéressant de noter que background est une notation abrégée pour définir background-color, background-image, background-position, background-repeat et background-attachment. La propriété vous êtes à essayer de l'animer (fixe dans votre question) est background-color (ou, en JS sans les guillemets, backgroundColor).

OriginalL'auteur Yanh Huan | 2011-01-15

  1. 5

    De la docs,

    La jQuery UI projet s'étend le .animate() méthode permet à certains non-numérique styles tels que les couleurs animés. Le projet comprend également des mécanismes pour la spécification des animations grâce à des classes CSS plutôt que des attributs individuels.

    Donc, si vous utilisez jQuery UI, vous pouvez animer les couleurs d'arrière-plan. Assurez-vous que vous utilisez backgroundColor et pas background.

    La couleur animations plugin pour jQuery le fait aussi.

    Live Exemple: http://jsfiddle.net/thai/NXejr/2/

    OriginalL'auteur Thai

  2. 2

    Vous aurez besoin d'un plugin pour faire de la couleur des animations avec jQuery:

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

    +1. C'. Comme par l'API docs: "propriétés qui sont non numériques ne peuvent pas être animés à l'aide de la fonctionnalité de base de jQuery. (Par exemple, width, height, ou left peut être animé, mais background-color ne peut pas l'être.)"

    OriginalL'auteur jvenema

  3. 1

    Essayez ceci:

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

    J'ai eu plus ou moins de succès avec les animer, mais a constaté que l'utilisation de ses construit en rappel plus du jQuery css semble fonctionner pour la plupart des cas. Testé dans IE9, FF4, Chrome, à l'aide de jQuery 1.5.

    Pour une solution plus complète, ajouter ce 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); 
            });
    };
});

    et de l'appeler de la sorte: 

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

    OriginalL'auteur matadur

  4. 1

    C'est un code simple pour animer des couleurs RVB à l'aide de la pure jQuery (et non pas à l'aide de jQuery.Couleur plugin)

    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)}})
    Merci s'accoupler! Il fonctionne pour moi.

    OriginalL'auteur Taha Jahangir

  5. 0

    Vous pouvez utiliser des transitions CSS3 pour le même effet. votre animer pourrait être réalisée avec

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

}

    Le seul problème avec cette solution est IE<10 soutien

    OriginalL'auteur amitgur

  6. 0

    En utilisant la même syntaxe (...{background-color :"red"}...), j'obtiens l'erreur

    SyntaxError: Unexpected token -

    J'ai été en mesure de le faire fonctionner en encapsulant la propriété CSS background-color entre guillemets simples:

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

    OriginalL'auteur Jeromy French