Sono nuovo di zecca su jQuery e ho una certa esperienza con Prototype. In Prototype, esiste un metodo per "lampeggiare" un elemento, ovvero. evidenziarlo brevemente in un altro colore e farlo tornare alla normalità in modo che l'occhio dell'utente sia attratto da esso. Esiste un metodo simile in jQuery? Vedo fadeIn, fadeOut e animate, ma non vedo nulla di simile a "flash". Forse uno di questi tre può essere utilizzato con input appropriati?

La mia strada è .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>

È possibile utilizzare il plug-in jQuery Color .

Ad esempio, per attirare l'attenzione su tutti i div della tua pagina, puoi utilizzare il seguente codice:

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

Modifica: nuovo e migliorato

Quanto segue utilizza la stessa tecnica di cui sopra, ma ha i vantaggi aggiuntivi di:

• evidenziare il colore e la durata parametrizzati
• mantenendo il colore di sfondo originale, invece di supporre che sia bianco
• essendo un'estensione di jQuery, quindi puoi usarlo su qualsiasi oggetto

Estendi l'oggetto 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);
    }
};

Esempio di utilizzo:

$("div").animateHighlight("#dd0000", 1000);

È possibile utilizzare le animazioni css3 per eseguire il flashing di un elemento

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

E tu jQuery per aggiungere la classe

jQuery(selector).addClass("flash");

Dopo 5 anni ... (E non è necessario alcun plug-in aggiuntivo)

Questo lo "pulsa" al colore desiderato (ad es. Bianco) mettendo un colore di sfondo div dietro di esso e quindi sbiadendo l'oggetto .

Oggetto HTML (ad es. Pulsante):

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

jQuery (vaniglia, nessun altro plugin):

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

elemento - nome della classe

primo numero in fadeTo()- millisecondi per la transizione

secondo numero in fadeTo()- opacità dell'oggetto dopo dissolvenza / dissolvenza

Puoi verificarlo nell'angolo in basso a destra di questa pagina Web: https://single.majlovesreg.one/v1/

Modifica (willsteel) nessun selettore duplicato utilizzando $ (questo) e ottimizzato i valori per eseguire in modo automatico un flash (come richiesto dall'OP).

Potresti usare l' effetto di evidenziazione nell'interfaccia utente di jQuery per ottenere lo stesso, immagino.

Se stai usando jQueryUI, c'è una pulsatefunzione inUI/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 );

È possibile utilizzare questo plug-in (inserirlo in un file js e utilizzarlo tramite script-tag)

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

E poi usa qualcosa del genere:

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

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

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

}

Questo aggiunge un metodo 'flash' a tutti gli oggetti jQuery:

$( '#importantElement' ).flash( '255,0,0', 1000 );

Puoi estendere ulteriormente il metodo di Desheng Li consentendo a un conteggio delle iterazioni di eseguire più flash in questo modo:

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

Quindi puoi chiamare il metodo con un orario e un numero di lampeggi:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

Soluzione jQuery pura.

(non è necessario jquery-ui / animate / color.)

Se tutto ciò che vuoi è quell'effetto "flash" giallo senza caricare il colore 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)
};

Lo script sopra fa semplicemente dissolvenza gialla, perfetta per far sapere all'utente che l'elemento è stato aggiornato o qualcosa di simile.

Uso:

flash($('#your-element'))

Questa potrebbe essere una risposta più aggiornata, ed è più breve, poiché le cose sono state un po 'consolidate da questo post. Richiede jquery-ui-effect-highlight .

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

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

Che ne dici di una risposta davvero semplice?

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

Lampeggia due volte ... tutto qui!

Non posso credere che questo non sia ancora su questa domanda. Tutto quello che devi fare:

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

Questo fa esattamente quello che vuoi fare, è super facile, funziona per entrambi show()e hide()metodi.

Sarebbe un effetto del polso(offline) Il plugin JQuery è appropriato per quello che stai cercando?

È possibile aggiungere una durata per limitare nel tempo l'effetto dell'impulso.

Come menzionato da JP nei commenti, ora c'è il suo plugin di impulsi aggiornato .
Guarda il suo repository GitHub . Ed ecco una demo .

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

Ho trovato queste lune più tardi, ma se a qualcuno importa, sembra che questo sia un bel modo per far lampeggiare permanentemente qualcosa:

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

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

I seguenti codici funzionano per me. Definire due funzioni di dissolvenza in entrata e in uscita e inserirle nel callback reciproco.

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

Quanto segue controlla i tempi dei flash:

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

Stavo cercando una soluzione a questo problema, ma senza fare affidamento sull'interfaccia utente di jQuery.

Questo è quello che mi è venuto in mente e funziona per me (niente plugin, solo Javascript e jQuery); - Ecco il violino funzionante - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Imposta il parametro CSS corrente nel tuo file CSS come normale CSS e crea una nuova classe che gestisce semplicemente il parametro per cambiare il colore di sfondo, e impostalo su "! Important" per sovrascrivere il comportamento predefinito. come questo...

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

Quindi basta usare la funzione seguente e passare l'elemento DOM come una stringa, un numero intero per il numero di volte in cui si desidera che si verifichi il flash, la classe in cui si desidera cambiare e un numero intero per il ritardo.

Nota: se passi un numero pari per la variabile 'times', finirai con la classe con cui hai iniziato e se passi un numero dispari finirai con la classe attivata / disattivata. Entrambi sono utili per cose diverse. Uso la "i" per modificare il tempo di ritardo, altrimenti sparerebbero tutti allo stesso tempo e l'effetto andrebbe perso.

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.  

Come fadein / fadeout potresti usare animate 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);

Semplice e flessibile

$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 è 3 secondi

Dall'opacità 1 viene sbiadito a 0.3, quindi a 1 e così via.

Puoi impilarne di più.

È necessario solo jQuery. :)

Esiste una soluzione alternativa per il bug di sfondo animato. Questa sintesi include un esempio di un semplice metodo di evidenziazione e il suo utilizzo.

/* 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

Se l'inclusione di una libreria è eccessiva, ecco una soluzione che funzionerà sicuramente.

$('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. Trigger dell'evento di installazione

2. Imposta il colore di sfondo dell'elemento blocco

3. All'interno di setTimeout usa fadeOut e fadeIn per creare un piccolo effetto di animazione.

4. All'interno del secondo set Timeout ripristina il colore di sfondo predefinito

   Testato su alcuni browser e funziona bene.

Sfortunatamente la risposta migliore richiede l'interfaccia utente di JQuery. http://api.jquery.com/animate/

Ecco una soluzione JQuery alla vaniglia

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>

Ecco una versione leggermente migliorata della soluzione di colbeerhey. Ho aggiunto una dichiarazione di ritorno in modo che, nel vero formato jQuery, eseguiamo la catena degli eventi dopo aver chiamato l'animazione. Ho anche aggiunto gli argomenti per cancellare la coda e saltare alla fine di un'animazione.

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

Questo pulserà il colore di sfondo di un elemento fino a quando non viene attivato un evento di passaggio del mouse

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

Metti insieme tutto quanto sopra: una soluzione semplice per eseguire il flashing di un elemento e tornare al colore bg originale ...

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

Usa così:

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

Spero che questo ti aiuti!

Ecco una soluzione che utilizza un mix di animazioni jQuery e CSS3.

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

In sostanza, si inizia cambiando il colore nel colore "flash", quindi si utilizza un'animazione CSS3 per far sbiadire il colore. È necessario modificare la durata della transizione affinché il "flash" iniziale sia più veloce della dissolvenza.

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

Dove le classi CSS sono le seguenti.

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

basta dare a elem.fadeOut (10) .fadeIn (10);

Questo è abbastanza generico da poter scrivere qualunque codice ti piaccia animare. Puoi anche ridurre il ritardo da 300ms a 33ms e sfumare i colori, ecc.

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

puoi usare il plugin jquery Pulsate per forzare a focalizzare l'attenzione su qualsiasi elemento html con controllo su velocità, ripetizione e colore.

JQuery.pulsate () ^{* con Demos}

inizializzatore di esempio:

• $ (". Pulse4" ) pulsate ({Velocità: 2500}).
• $ (". Pulsante CommandBox: visible"). Pulsate ({color: "# f00", velocità: 200, portata: 85, ripetizione: 15})