Soy nuevo en jQuery y tengo algo de experiencia con Prototype. En Prototype, hay un método para "flashear" un elemento, es decir. resáltelo brevemente en otro color y haga que vuelva a la normalidad para que el ojo del usuario se sienta atraído por él. ¿Existe tal método en jQuery? Veo fadeIn, fadeOut y animar, pero no veo nada como "flash". ¿Quizás uno de estos tres se puede usar con las entradas apropiadas?

Mi manera es .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>

Puede usar el complemento jQuery Color .

Por ejemplo, para llamar la atención sobre todos los divs en su página, puede usar el siguiente código:

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

Editar: nuevo y mejorado

A continuación se utiliza la misma técnica que la anterior, pero tiene los beneficios adicionales de:

• color de resaltado parametrizado y duración
• conservando el color de fondo original, en lugar de asumir que es blanco
• ser una extensión de jQuery, por lo que puede usarlo en cualquier objeto

Extienda el objeto 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);
    }
};

Ejemplo de uso:

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

Puedes usar animaciones css3 para flashear 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; }
}

Y jQuery para agregar la clase

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

Después de 5 años ... (y no se necesita ningún complemento adicional)

Éste lo "pulsa" al color que desea (por ejemplo, blanco) al colocar un color de fondo div detrás de él y luego desvanecer el objeto y volverlo a colocar .

Objeto HTML (por ejemplo, botón):

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

jQuery (vainilla, no hay otros complementos):

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

elemento - nombre de clase

primer número en fadeTo()milisegundos para la transición

segundo número en fadeTo()- opacidad del objeto después de desvanecimiento / desvanecimiento

Puede consultar esto en la esquina inferior derecha de esta página web: https://single.majlovesreg.one/v1/

Edite (willsteel) sin selector duplicado usando $ (this) y valores ajustados para realizar un flash de forma aguda (como lo solicitó el OP).

Supongo que podría usar el efecto de resaltado en jQuery UI para lograr lo mismo.

Si está utilizando jQueryUI, hay una pulsatefunción enUI/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 );

Puede usar este complemento (póngalo en un archivo js y úselo a través de la etiqueta de script)

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

Y luego usa algo como esto:

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

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

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

}

Esto agrega un método 'flash' a todos los objetos jQuery:

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

Puede ampliar aún más el método de Desheng Li permitiendo que un recuento de iteraciones haga múltiples flashes de la siguiente manera:

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

Luego puede llamar al método con una hora y número de flashes:

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

Pura solución jQuery.

(no se necesita jquery-ui / animate / color).

Si todo lo que quiere es ese efecto amarillo "flash" sin cargar el color 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)
};

El script anterior simplemente hace un desvanecimiento amarillo de 1s, perfecto para que el usuario sepa que el elemento se actualizó o algo similar.

Uso:

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

Esta puede ser una respuesta más actualizada y es más corta, ya que las cosas se han consolidado un poco desde esta publicación. Requiere jquery-ui-effect-highlight .

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

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

¿Qué tal una respuesta realmente simple?

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

Parpadea dos veces ... eso es todo amigos!

No puedo creer que esto no esté en esta pregunta todavía. Todo lo que tienes que hacer:

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

Esto hace exactamente lo que quieres que haga, es muy fácil, funciona para ambos show()y para los hide()métodos.

Sería un efecto de pulso(sin conexión) ¿El complemento JQuery es apropiado para lo que estás buscando?

Puede agregar una duración para limitar el efecto del pulso a tiempo.

Como mencionó JP en los comentarios, ahora está su plugin de pulso actualizado .
Ver su repositorio de GitHub . Y aquí hay una demostración .

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

Encontré muchas lunas más tarde, pero si a alguien le importa, parece que esta es una buena manera de hacer que algo parpadee permanentemente:

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

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

Los siguientes códigos me funcionan. Defina dos funciones de aparición y desaparición gradual y colóquelas en la devolución de llamada del otro.

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

Lo siguiente controla los tiempos de los flashes:

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

Estaba buscando una solución a este problema pero sin depender de jQuery UI.

Esto es lo que se me ocurrió y funciona para mí (sin complementos, solo Javascript y jQuery); - Aquí está el violín de trabajo - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Establezca el parámetro CSS actual en su archivo CSS como CSS normal, y cree una nueva clase que solo maneje el parámetro para cambiar, es decir, el color de fondo, y configúrelo en '! Important' para anular el comportamiento predeterminado. Me gusta esto...

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

Luego, use la función a continuación y pase el elemento DOM como una cadena, un número entero para la cantidad de veces que desea que ocurra el flash, la clase a la que desea cambiar y un número entero para el retraso.

Nota: Si pasa un número par para la variable 'veces', terminará con la clase con la que comenzó, y si pasa un número impar, terminará con la clase conmutada. Ambos son útiles para diferentes cosas. Uso la 'i' para cambiar el tiempo de retraso, o todos dispararían al mismo tiempo y el efecto se perdería.

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.  

Al igual que fadein / fadeout, puede usar animar 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 y flexible

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

3000 son 3 segundos

Desde la opacidad 1 se desvaneció a 0.3, luego a 1 y así sucesivamente.

Puedes apilar más de estos.

Solo se necesita jQuery. :)

Hay una solución para el error de fondo animado. Esta esencia incluye un ejemplo de un método simple de resaltado y su uso.

/* 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 incluir una biblioteca es excesivo, aquí hay una solución que está garantizada para funcionar.

$('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. Disparador de evento de configuración

2. Establecer el color de fondo del elemento de bloque

3. Dentro de setTimeout usa fadeOut y fadeIn para crear un pequeño efecto de animación.

4. Dentro del segundo setTimeout restablecer el color de fondo predeterminado

   Probado en algunos navegadores y funciona muy bien.

Lamentablemente, la respuesta principal requiere JQuery UI. http://api.jquery.com/animate/

Aquí hay una solución vainilla JQuery

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>

Aquí hay una versión ligeramente mejorada de la solución de colbeerhey. Agregué una declaración de devolución para que, en forma jQuery verdadera, encadenemos eventos después de llamar a la animación. También he agregado los argumentos para borrar la cola y saltar al final de una animación.

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

Este pulsará el color de fondo de un elemento hasta que se active un evento de mouseover

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

Arme esto de todo lo anterior: una solución fácil para flashear un elemento y volver al color original bg ...

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

Usar así:

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

¡Espero que esto ayude!

Aquí hay una solución que utiliza una combinación de animaciones jQuery y CSS3.

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

Esencialmente, comienza cambiando el color a su color "flash", y luego usa una animación CSS3 para dejar que el color se desvanezca. Debe cambiar la duración de la transición para que el "destello" inicial sea más rápido que el desvanecimiento.

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

Donde las clases CSS son las siguientes.

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

solo da elem.fadeOut (10) .fadeIn (10);

Esto es lo suficientemente genérico como para que pueda escribir el código que desee animar. Incluso puede disminuir el retraso de 300ms a 33ms y desvanecer colores, 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();
}

puede usar el complemento jquery Pulsate para forzar a centrar la atención en cualquier elemento html con control sobre la velocidad, la repetición y el color.

JQuery.pulsate () ^{* con Demos}

inicializador de muestra:

• $ (". pulse4"). pulsar ({velocidad: 2500})
• $ (". Botón CommandBox: visible"). Pulsate ({color: "# f00", velocidad: 200, alcance: 85, repetición: 15})