Comment pouvez-vous fade in / out une couleur de fond en utilisant jquery?

Question

Comment se fanent dans le contenu texte avec jQuery?

Le point est d'attirer l'attention de l'utilisateur au message.

Answer 1

Cette fonctionnalité exacte (3 deuxième lueur pour mettre en évidence un message) est mis en œuvre dans l'interface utilisateur jQuery comme l'effet de surbrillance

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

couleur et la durée sont variables

Answer 2

Si vous voulez animer précisément la couleur de fond d'un élément, je crois que vous devez inclure cadre jQueryUI. Ensuite, vous pouvez faire:

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

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

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

Answer 3

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

Par exemple, vous avez un div avec la classe « boîte », ajoutez le suivant css

.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 différentes couleurs d'arrière-plan comme « boîte en surbrillance » ou quelque chose comme ça avec les éléments essentiels suivants:

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

Je suis un débutant et peut-être il y a quelques inconvénients de cette méthode, mais ce sera peut-être utile pour quelqu'un

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

Answer 4

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

Comme d'autres l'ont écrit, une partie de cela peut être fait en utilisant aussi bien la bibliothèque jQuery UI.

Answer 5

En utilisant jQuery uniquement (pas de bibliothèque UI / plugin). 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 légèreté de 50% à 100%, essentiellement pour rendre le blanc de fond (vous pouvez choisir une valeur en fonction de la couleur).
• SetTimeout est enveloppé dans une fonction anonyme pour qu'il fonctionne correctement dans une boucle ( raison )

Answer 6

En fonction de votre soutien du navigateur, vous pouvez utiliser une animation css. le soutien du navigateur est IE10 et pour l'animation CSS. C'est agréable et vous ne devez pas ajouter la dépendance à l'interface utilisateur jquery si son seul un petit œuf de Pâques. Si elle fait partie intégrante de votre site (alias nécessaire pour IE9 et ci-dessous) aller avec la solution de l'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 click jQuery qui ajoute la classe your-animation à l'élément que vous souhaitez animer, ce qui déclenche l'arrière-plan la décoloration d'une couleur à l'autre:

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

Answer 7

J'ai écrit un plugin jQuery super simple pour accomplir quelque chose de semblable à cela. Je voulais quelque chose de vraiment léger (il est 732 octets minified), donc y compris un grand plug-in ou l'interface utilisateur était hors de question pour moi. Il est encore un peu rude sur les bords, donc commentaires sont les bienvenus.

Vous pouvez ici checkout le plugin. https://gist.github.com/4569265

En utilisant le plug-in, ce serait une simple question de créer un effet de surbrillance en changeant la couleur d'arrière-plan, puis en ajoutant un setTimeout au feu le plug-in pour revenir à estomper la couleur de fond d'origine.

Answer 8

Pour estomper entre 2 couleurs en utilisant uniquement 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

Answer 9

javascript fondu 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>

Dans l'impression, le jaune est moins bleu, en commençant donc avec le 3ème élément rgb (bleu) à moins de 255 commence par un moment fort jaune. Puis le 10+ dans le réglage de la valeur var unBlue incrémente le bleu moins jusqu'à ce qu'il atteigne 255.