web-dev-qa-db-fra.com

Comment fondu en entrée/sortie une couleur de fond en utilisant jQuery

Comment puis-je insérer un contenu textuel dans jQuery?

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

jquerycssbackground-colorfade
90
mrblah

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

http://docs.jquery.com/UI/Effects/Highlight

La couleur et la durée sont variables

88
micmcg

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/

86
user113716

Je sais que la question était de savoir comment le faire avec JQuery, mais vous pouvez obtenir le même effet avec des CSS simples 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, telle que 'box surligné' ou quelque chose du genre avec le css suivant:

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

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

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

18
NoDisplayName

Généralement, vous pouvez utiliser la méthode .animate () pour manipuler des propriétés CSS arbitraires, mais pour les couleurs de fond, vous devez utiliser le plugin color . Une fois que vous avez inclus ce plugin, vous pouvez utiliser quelque chose comme ce que d’autres ont indiqué $('div').animate({backgroundColor: '#f00'}) pour changer de couleur.

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

14
Ryan

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%, en rendant essentiellement le fond blanc (vous pouvez choisir n'importe quelle valeur en fonction de votre couleur). 
  • SetTimeout est encapsulé dans une fonction anonyme pour fonctionner correctement dans une boucle ( raison ) 
9
user

En fonction de la prise en charge de votre navigateur, vous pouvez utiliser une animation CSS. Le support du navigateur est IE10 et supérieur pour l'animation CSS. C'est bien, donc vous n'avez 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érieur), utilisez la solution jquery UI.

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

Créez ensuite un événement de clic jQuery qui ajoute la classe your-animation à l'élément que vous souhaitez animer, déclenchant le fondu en fondu d'une couleur à une autre:

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

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 toujours un peu difficile sur les bords, donc les commentaires sont les bienvenus.

Vous pouvez acheter le plugin ici: https://Gist.github.com/4569265 .

En utilisant le plugin, il serait simple de créer un effet de surbrillance en modifiant la couleur de fond, puis en ajoutant une variable setTimeout pour activer le plugin afin de revenir à la couleur de fond d'origine.

4
Dominic P

Pour passer entre 2 couleurs en utilisant seulement 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

3
Curtis Yallop

le javascript passe au blanc sans jQuery ou une 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 le moins bleu. Par conséquent, si vous démarrez avec le troisième élément RGB (bleu) à moins de 255, le surlignage jaune commence. Ensuite, le 10+ dans la définition de la valeur var unBlue incrémente le moins bleu jusqu'à atteindre 255.

0
gordon