Comment faire fondre une couleur d'arrière-plan en utilisant jquery?

Comment est-ce que je fondu dans le contenu de texte avec jQuery?

Le but est d'attirer l'attention de l'utilisateur sur le message.

Cette fonctionnalité exacte (3 secondes d'éclat pour mettre en évidence un message) est implémentée dans l'interface utilisateur jQuery comme effet de surbrillance

https://api.jqueryui.com/highlight-effect/

La couleur et la durée sont variables

Si vous souhaitez animer spécifiquement la couleur d'arrière-plan d'un élément, je pense que vous devez inclure le framework jQueryUI. Ensuite, vous pouvez faire:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI a des effets intégrés qui peuvent également vous être utiles.

http://jqueryui.com/demos/effect/

Je sais que la question était de savoir comment le faire avec Jquery, mais vous pouvez obtenir le même effet avec un simple css et juste un peu de jquery ...

Par exemple, vous avez un div avec la classe 'box', ajoutez le css suivant

.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

puis utilisez la fonction AddClass pour ajouter une autre classe avec une couleur d'arrière-plan différente comme `` boîte en surbrillance '' ou quelque chose comme ça avec le css suivant:

.box.highlighted {
  background-color: white;
}

Je suis un débutant et peut-être qu'il y a des inconvénients à cette méthode mais peut-être que cela sera utile pour quelqu'un

Voici un codepen: https://codepen.io/anon/pen/baaLYB

Habituellement, vous pouvez utiliser la méthode .animate () pour manipuler des propriétés CSS arbitraires, mais pour les couleurs d'arrière-plan, vous devez utiliser le plugin de couleur . Une fois que vous avez inclus ce plugin, vous pouvez utiliser quelque chose comme d'autres l'ont indiqué $('div').animate({backgroundColor: '#f00'})pour changer la couleur.

Comme d'autres l'ont écrit, cela peut également être fait en utilisant la bibliothèque d'interface utilisateur jQuery.

Utilisation de jQuery uniquement (pas de bibliothèque / plugin d'interface utilisateur). Même jQuery peut être facilement éliminé

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Démo: http://jsfiddle.net/5NB3s/2/

• SetTimeout augmente la luminosité de 50% à 100%, rendant essentiellement l'arrière-plan blanc (vous pouvez choisir n'importe quelle valeur en fonction de votre couleur).
• SetTimeout est enveloppé dans une fonction anonyme pour qu'il fonctionne correctement dans une boucle ( raison )

En fonction de la prise en charge de votre navigateur, vous pouvez utiliser une animation css. Le support du navigateur est IE10 et plus pour l'animation CSS. C'est bien pour que vous n'ayez pas à ajouter la dépendance de l'interface utilisateur jquery si ce n'est qu'un petit œuf de Pâques. S'il fait partie intégrante de votre site (c'est-à-dire nécessaire pour IE9 et inférieurs), optez pour la solution d'interface utilisateur jquery.

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

Ensuite, créez un événement de clic jQuery qui ajoute la your-animationclasse à l'élément que vous souhaitez animer, déclenchant la décoloration de l'arrière-plan d'une couleur à une autre:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

J'ai écrit un plugin jQuery super simple pour accomplir quelque chose de similaire. Je voulais quelque chose de vraiment léger (c'est 732 octets minifiés), donc inclure un gros plugin ou une interface utilisateur était hors de question pour moi. C'est encore un peu difficile sur les bords, donc les commentaires sont les bienvenus.

Vous pouvez vérifier le plugin ici: https://gist.github.com/4569265 .

En utilisant le plugin, il serait simple de créer un effet de surbrillance en changeant la couleur d'arrière-plan, puis en ajoutant un setTimeoutpour déclencher le plugin afin de revenir à la couleur d'arrière-plan d'origine.

Pour fondre entre 2 couleurs en utilisant uniquement du javascript simple:

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

Source: http://www.pagecolumn.com/javascript/fade_text.htm

javascript passe au blanc sans jQuery ou autre bibliothèque:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

En impression, le jaune est moins bleu, donc à partir du 3ème élément RVB (bleu) à moins de 255 commence par une surbrillance jaune. Ensuite, le 10+réglage de la var unBluevaleur incrémente le bleu moins jusqu'à ce qu'il atteigne 255.