Comment rendre un élément «flash» dans jQuery

249

Je suis tout nouveau sur jQuery et j'ai une certaine expérience de l'utilisation de Prototype. Dans Prototype, il existe une méthode pour "flasher" un élément - ie. mettez-le brièvement en surbrillance dans une autre couleur et faites-le revenir à la normale pour que l'œil de l'utilisateur y soit attiré. Existe-t-il une telle méthode dans jQuery? Je vois fadeIn, fadeOut et animer, mais je ne vois rien comme "flash". Peut-être que l'un de ces trois peut être utilisé avec des entrées appropriées?

Howard Pinsley
la source
4
Cela ne répond pas à l'OP, mais le code (vaguement testé) peut être utile aux futurs chercheurs Google (comme moi):$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter
3
ajoutez ce css à l'élément:, text-decoration:blinkpuis supprimez-le.
Dementic
J'ai mis une démo JSFiddle ici qui, je pense, est une meilleure réponse que celle que j'ai trouvée sur cette page: stackoverflow.com/a/52283660/470749
Ryan
Veuillez noter que le clignotement est officiellement déconseillé au profit des animations. Vérifiez à: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Réponses:

318

Ma voie est .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

etlds
la source
14
Pas la plus belle solution, mais courte, facile à comprendre et ne nécessite pas d'interface utilisateur / d'effets. Agréable!
Chris Jaynes
21
j'utilise un délai avant la séquence fadeIn, fadeOut, quelque chose comme $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu
1
Les arrière-plans clignotants ont souvent l'air collants ou tout simplement choquants - en particulier si l'élément que vous flashez est assis sur un fond blanc uni. essayez ceci avant d'ajouter des plugins de couleur et d'essayer de flasher les arrière-plans, etc.
Simon_Weaver
4
Le problème avec cette méthode est que ces événements peuvent se marcher les uns sur les autres. Vous devriez probablement mettre chaque fadeIn et fadeOut suivants dans leurs rappels respectifs. Par exemple: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth
Attention à utiliser ceci dans un code de validation qui pourrait être appelé fréquemment. Si le code est appelé avec le bon timing, vous pourriez vous retrouver avec un élément indiquant quand il ne devrait pas (ou vice versa)
Chris Pfohl
122

Vous pouvez utiliser le plugin jQuery Color .

Par exemple, pour attirer l'attention sur toutes les divs de votre page, vous pouvez utiliser le code suivant:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Modifier - Nouveau et amélioré

Ce qui suit utilise la même technique que ci-dessus, mais elle présente les avantages supplémentaires de:

  • couleur et durée de surbrillance paramétrées
  • conserver la couleur d'arrière-plan d'origine, au lieu de supposer qu'elle est blanche
  • étant une extension de jQuery, vous pouvez donc l'utiliser sur n'importe quel objet

Étendez l'objet jQuery:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Exemple d'utilisation:

$("div").animateHighlight("#dd0000", 1000);
curthipster
la source
4
Cela ne fonctionne pas non plus pour moi - êtes-vous sûr que cela ne dépend pas du plugin d'animations en couleur? plugins.jquery.com/project/color
UpTheCreek
18
Depuis les documents jquery sur .animate (): Toutes les propriétés animées doivent être une seule valeur numérique (sauf comme indiqué ci-dessous); les propriétés qui ne sont pas numériques ne peuvent pas être animées à l'aide de la fonctionnalité jQuery de base. (Par exemple, la largeur, la hauteur ou la gauche peuvent être animées mais la couleur de fond ne peut pas l'être.) Donc je suppose que vous utilisez un plugin sans vous en rendre compte.
UpTheCreek
4
J'ai remarqué qu'il n'a pas renvoyé d'objet. J'ai essayé d'empiler ce petit effet (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) et j'ai obtenu une erreur. J'avais besoin d'ajouter "retourner ceci;" jusqu'à la fin de la méthode.
Sage
2
Les documents officiels de jQuery disent que vous devez utiliser le plugin jQuery.Color () pour que cela fonctionne: github.com/jquery/jquery-color
jchook
3
À partir des documents jquery .animate: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Si vous souhaitez animer la couleur, vous avez besoin de l'interface utilisateur jQuery ou d'un autre plugin.
Adam Tomat
101

Vous pouvez utiliser des animations CSS3 pour flasher un élément

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

Et vous jQuery pour ajouter la classe

jQuery(selector).addClass("flash");
vinay
la source
Belle solution, si elle ne doit fonctionner qu'une seule fois. Une fois la classe ajoutée, l'ajout ultérieur de la classe n'entraîne (logiquement) pas le clignotement de l'élément.
Simon
7
La meilleure idée de ma vie. J'ai utilisé un délai pour supprimer la classe 2 secondes après l'effet
insigne
6
Voici un exemple de suppression de la classe une fois l'animation terminée afin que vous puissiez continuer à la flasher. jsfiddle.net/daCrosby/eTcXX/1
DACrosby
Très bien, cela fonctionne, mais notez que la propriété correcte pour la couleur d'arrière-plan est «transparente» au lieu de «aucune» si vous voulez passer un validateur de feuille de style.
Jan M
1
Notez que tous les navigateurs modernes prennent désormais en charge le standard @keyframeset les animationrègles, il n'est donc pas nécessaire d'utiliser des versions préfixées en plus peut-être -webkit- (pour le navigateur Blackberry).
coredumperror
75

Après 5 ans ... (Et aucun plugin supplémentaire nécessaire)

Celui-ci "l'impulsion" à la couleur que vous voulez (par exemple le blanc) en mettant une couleur d'arrière- plan div derrière elle, puis en fondant l'objet à l' intérieur puis à nouveau.

Objet HTML (par exemple bouton):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (vanilla, pas d'autres plugins):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

élément - nom de classe

premier nombre en fadeTo()- millisecondes pour la transition

deuxième nombre dans fadeTo()- l' opacité de l'objet après fondu / unfade

Vous pouvez le vérifier dans le coin inférieur droit de cette page Web: https://single.majlovesreg.one/v1/

Modifier (willsteel) pas de sélection dupliquée en utilisant $ (this) et les valeurs pour effectuer acutally tordu un flash (comme l'OP a demandé).

Majal
la source
60
fadeTo(0000)- Metallica
vulcan raven
2
Lisse comme du beurre! La meilleure solution de tous. Merci!
ColdTuna
1
comment faire cet infini?
tomexsans
1
Exemple de lien rompu.
meshy
2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Vous pouvez alors l'appeler comme $('#mydiv').flashUnlimited();- Il fait ce que Majal a répondu ci-dessus, et se rappelle à la fin du cycle.
Jay Dadhania
46

Vous pouvez utiliser l' effet de surbrillance dans l'interface utilisateur jQuery pour obtenir le même résultat, je suppose.

Michiel Overeem
la source
8
Cela fait partie de jQueryUI, qui est assez lourd, ne fait pas partie de la bibliothèque jQuery standard (bien que vous puissiez simplement utiliser le noyau d'effets d'interface utilisateur, sur lequel il s'appuie).
UpTheCreek
3
Vous pouvez télécharger uniquement le noyau d'effets + l'effet que vous souhaitez, ce qui, pour "surligner" + "pulser", s'élève à 12 Ko. Pas totalement léger, mais pas trop lourd non plus.
Roman Starkov
45

Si vous utilisez jQueryUI, il y a une pulsatefonction dansUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

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

SooDesuNe
la source
1
@DavidYell, ouvrez une nouvelle question et publiez un exemple de code. pulsatefonctionne bien dans Chrome.
SooDesuNe
Clignote toutes les 5 secondes: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.
@all Est-ce que quelqu'un maintenant utilise des animations css3 et / ou transforme? Sympa quand même (mais je préfère toujours css3 comme dans l'une des autres réponses)
Martin Meeser
18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );
sporkit
la source
1
C'est simple et élégant.
Gra
Tout en utilisant fadeInet fadeOutaffectant d'autres éléments frères car cela fait basculer la displaypropriété css , regardez bizarre dans mon cas. Mais celui-ci résout le problème. Merci, cela fonctionne élégamment comme un charme.
fsevenm
15

Vous pouvez utiliser ce plugin (le mettre dans un fichier js et l'utiliser via un script-tag)

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

Et puis utilisez quelque chose comme ceci:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

Cela ajoute une méthode «flash» à tous les objets jQuery:

$( '#importantElement' ).flash( '255,0,0', 1000 );
okoman
la source
12

Vous pouvez étendre la méthode de Desheng Li en permettant à un nombre d'itérations de faire plusieurs flashs comme ceci:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Ensuite, vous pouvez appeler la méthode avec une heure et un nombre de flashs:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
Rob Evans
la source
Modifié pour var iterationDuration = Math.floor(duration / iterations);que vous puissiez diviser par des nombres impairs et fait en return this;sorte que vous puissiez enchaîner d'autres méthodes après.
user1477388
Cela ne change pas vraiment la couleur de quoi que ce soit?
nuits
12

Solution jQuery pure.

(pas besoin de jquery-ui / animate / color.)

Si tout ce que vous voulez, c'est cet effet "flash" jaune sans charger la couleur jquery:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Le script ci-dessus fait simplement un fondu jaune 1 s, parfait pour faire savoir à l'utilisateur que l'élément a été mis à jour ou quelque chose de similaire.

Usage:

flash($('#your-element'))
hakunin
la source
J'adore cette solution, sauf que l'arrière-plan ne retourne plus à ce qu'il était
MrPHP
7

Cela peut être une réponse plus à jour et plus courte, car les choses se sont quelque peu consolidées depuis ce post. Nécessite jquery-ui-effect-highlight .

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

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

rcd
la source
7

Que diriez-vous d'une réponse vraiment simple?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

Clignote deux fois ... c'est tout le monde!

TonyP
la source
Cela ne clignote pas dans une autre couleur (qui a été demandée), cela atténue simplement l'opacité.
Tim Eckel
6

Je ne peux pas croire que ce ne soit pas encore sur cette question. Tout ce que tu dois faire:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

Cela fait exactement ce que vous voulez faire, est super facile, fonctionne à la fois show()et les hide()méthodes.

bthemonarch
la source
15
Remarque: pour que cela fonctionne, vous devez ajouter les effets de jquery ui. cela ne fait pas partie du noyau jQuery
travis-146
6

Un effet d'impulsion(hors ligne) Le plugin JQuery convient-il à ce que vous recherchez?

Vous pouvez ajouter une durée pour limiter l'effet d'impulsion dans le temps.


Comme mentionné par JP dans les commentaires, il y a maintenant son plugin d'impulsion mis à jour .
Voir son dépôt GitHub . Et voici une démo .

VonC
la source
Plugin d'impulsion mis à jour: james.padolsey.com/javascript/simple-pulse-plugin-for-jquery
James
La démo est cassée, car la bibliothèque js à laquelle elle fait référence n'existe pas
PandaWood
@PandaWood J'ai restauré le lien vers le repo GitHub et mis à jour la démo
VonC
6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);
yPhil
la source
1
Exactement. Contrôle simple et complet du fondu entrant et sortant.
pollaris
5

J'ai trouvé ce nombre de lunes plus tard, mais si quelqu'un s'en soucie, il semble que ce soit une bonne façon de faire clignoter quelque chose en permanence:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
phillyd
la source
4

Les codes suivants fonctionnent pour moi. Définissez deux fonctions de fondu d'entrée et de sortie et placez-les dans le rappel l'une de l'autre.

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

Les éléments suivants contrôlent la durée des flashs:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);
Sankglory
la source
4

Je cherchais une solution à ce problème mais sans compter sur jQuery UI.

C'est ce que j'ai trouvé et cela fonctionne pour moi (pas de plugins, juste Javascript et jQuery); - Voici le violon qui travaille - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Définissez le paramètre CSS actuel dans votre fichier CSS en tant que CSS normal, et créez une nouvelle classe qui gère simplement le paramètre pour changer la couleur d'arrière-plan, et définissez-le sur '! Important' pour remplacer le comportement par défaut. comme ça...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

Ensuite, utilisez simplement la fonction ci-dessous et passez l'élément DOM sous forme de chaîne, un entier pour le nombre de fois que vous souhaitez que le flash se produise, la classe que vous souhaitez modifier et un entier pour le retard.

Remarque: Si vous passez un nombre pair pour la variable 'times', vous vous retrouverez avec la classe avec laquelle vous avez commencé, et si vous passez un nombre impair, vous vous retrouverez avec la classe basculée. Les deux sont utiles pour différentes choses. J'utilise le «i» pour changer le temps de retard, sinon ils se déclencheraient tous en même temps et l'effet serait perdu.

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  
SoEzPz
la source
3

Comme fadein / fadeout, vous pouvez utiliser l'animation css / delay

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

Simple et flexible

Roman Losev
la source
3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 est de 3 secondes

De l'opacité 1, elle passe à 0,3, puis à 1 et ainsi de suite.

Vous pouvez en empiler plus.

Seul jQuery est nécessaire. :)

Combiner
la source
2

Il existe une solution de contournement pour le bogue d'arrière-plan animé. Cet élément comprend un exemple d'une méthode de surbrillance simple et son utilisation.

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231

danlee
la source
2

Si l'inclusion d'une bibliothèque est exagérée, voici une solution dont le fonctionnement est garanti.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. Configuration du déclencheur d'événement

  2. Définir la couleur d'arrière-plan de l'élément de bloc

  3. Dans setTimeout, utilisez fadeOut et fadeIn pour créer un petit effet d'animation.

  4. À l'intérieur du deuxième setTimeout réinitialiser la couleur de fond par défaut

    Testé dans quelques navigateurs et ça marche bien.

Gene Kelly
la source
2

Malheureusement, la première réponse nécessite l'interface utilisateur JQuery. http://api.jquery.com/animate/

Voici une solution JQuery vanille

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>
Chloe
la source
Si vous venez de créer flashun objet jQuery, cela fonctionne très bien. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn
1

Voici une version légèrement améliorée de la solution de colbeerhey. J'ai ajouté une déclaration de retour afin que, sous une véritable forme jQuery, nous enchaînions les événements après avoir appelé l'animation. J'ai également ajouté les arguments pour effacer la file d'attente et passer à la fin d'une animation.

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};
th3byrdm4n
la source
remarque: l'animation des couleurs d'arrière-plan nécessite l'utilisation du plugin UI couleurs. voir: api.jquery.com/animate
Martlark
1

Celui-ci fera pulser la couleur d'arrière-plan d'un élément jusqu'à ce qu'un événement de survol se déclenche

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}
Brad
la source
1

Réunissez tout cela à partir de tout ce qui précède - une solution simple pour flasher un élément et revenir à la couleur d'origine ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

Utilisez comme ceci:

$('<some element>').flash('#ffffc0', 1000, 3);

J'espère que cela t'aides!

Duncan
la source
Méfiez-vous du mal eval!
Birla
Je sais, j'avais juste besoin d'une solution rapide et sale. Eval a ses utilisations parfois!
Duncan
1

Voici une solution qui utilise un mélange d'animations jQuery et CSS3.

http://jsfiddle.net/padfv0u9/2/

Essentiellement, vous commencez par changer la couleur de votre couleur "flash", puis utilisez une animation CSS3 pour laisser la couleur s'estomper. Vous devez modifier la durée de la transition pour que le "flash" initial soit plus rapide que le fondu.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Où les classes CSS sont les suivantes.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
sffc
la source
1

donnez juste elem.fadeOut (10) .fadeIn (10);

ibsenv
la source
1

C'est suffisamment générique pour que vous puissiez écrire le code que vous souhaitez animer. Vous pouvez même réduire le délai de 300 ms à 33 ms et atténuer les couleurs, etc.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}
NateS
la source
1

vous pouvez utiliser le plugin jquery Pulsate pour forcer à concentrer l'attention sur n'importe quel élément html avec un contrôle sur la vitesse, la répétition et la couleur.

JQuery.pulsate () * avec des démos

exemple d'initialiseur:

  • $ (". pulse4"). pulsate ({vitesse: 2500})
  • $ (". Bouton CommandBox: visible"). Pulsate ({color: "# f00", vitesse: 200, portée: 85, répétition: 15})
Iman
la source