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.
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.
Réponses:
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.
'slow'
peut être remplacé par des secondes ... où 1000 équivaut à 1 seconde ... et ainsi de suite.
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/
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-animation
classe à 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 setTimeout
pour 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);
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 unBlue
valeur incrémente le bleu moins jusqu'à ce qu'il atteigne 255.