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?

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

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

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

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);

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");

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é).

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

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

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

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 );

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

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'))

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

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!

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.

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 .

function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

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)

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);

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.  

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

$("#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. :)

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

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.

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>

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

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

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!

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

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

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();
}

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})