¿Cómo hacer que un elemento "flash" en jQuery


249

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?


44
Esto no responde al OP, pero el código (probado libremente) puede ser útil para futuros buscadores de Google (como yo):$.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
agregue este CSS al elemento:, text-decoration:blinkluego elimínelo.
Demenciales el


Puse una demostración de JSFiddle aquí que creo que es una mejor respuesta que la que encontré en esta página: stackoverflow.com/a/52283660/470749
Ryan

Tenga en cuenta que el parpadeo está oficialmente en desuso en favor de las animaciones. Consulte en: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Respuestas:


318

Mi manera es .fadein, .fadeout .fadein, .fadeout ......

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


14
No es la solución más hermosa, pero es corta, fácil de entender y no requiere efectos de interfaz de usuario. ¡Agradable!
Chris Jaynes

21
uso un retraso antes de la secuencia fadeIn, fadeOut, algo así como $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
los fondos parpadeantes a menudo parecen pegajosos, o simplemente discordantes, especialmente si el elemento que está parpadeando se encuentra sobre un fondo blanco liso. intente esto primero antes de agregar complementos de color e intentar flashear fondos, etc.
Simon_Weaver

44
El problema con este método es que estos eventos potencialmente se pisan entre sí. Probablemente debería colocar cada fadeIn y fadeOut subsiguientes en sus respectivas devoluciones de llamada. Por ejemplo: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Tenga cuidado al usar esto en el código de validación que podría llamarse con frecuencia. Si se llama al código con el tiempo correcto, podría terminar con un elemento que muestra cuándo no debería (o viceversa)
Chris Pfohl

122

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

44
Tampoco funciona para mí, ¿estás seguro de que esto no depende del complemento de animaciones de color? plugins.jquery.com/project/color
UpTheCreek

18
De jquery docs en .animate (): todas las propiedades animadas deben ser un solo valor numérico (excepto como se indica a continuación); las propiedades que no son numéricas no se pueden animar con la funcionalidad básica de jQuery. (Por ejemplo, el ancho, la altura o la izquierda pueden ser animados, pero el color de fondo no puede serlo). Así que supongo que está utilizando un complemento sin darse cuenta.
UpTheCreek

44
Me di cuenta de que no devolvía un objeto. Intenté apilar este pequeño efecto (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) y obtuve un error. Necesitaba agregar "devolver esto"; hasta el final del método.
Sage

2
Los documentos oficiales de jQuery dicen que debe usar el complemento jQuery.Color () para que esto funcione: github.com/jquery/jquery-color
jchook

3
De los documentos jquery .animate: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Si desea animar el color, NECESITA jQuery UI o algún otro complemento.
Adam Tomat

101

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

Buena solución, si necesita funcionar solo una vez. Una vez que se ha agregado la clase, la adición posterior de la clase (lógicamente) no da como resultado la actualización del elemento.
Simon

77
La mejor idea de todas. Usé un tiempo de espera establecido para eliminar la clase 2 segundos después del efecto
insign

66
Aquí hay un ejemplo de eliminar la clase después de que la animación haya terminado para que pueda seguir flasheándola. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Genial, eso funciona, pero tenga en cuenta que la propiedad correcta para el color de fondo es 'transparente' en lugar de 'ninguno' si desea pasar un validador de hoja de estilo.
Jan M

1
Tenga en cuenta que todos los navegadores modernos ahora son compatibles con las reglas @keyframesy animationreglas normales , por lo que no es necesario usar ninguna versión prefijada además de tal vez -webkit- (para el navegador Blackberry).
coredumperror

75

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


6060
fadeTo(0000)- Metallica
cuervo vulcano

2
¡Suave como la mantequilla! La mejor solución de todas. ¡Gracias!
ColdTuna

1
¿Cómo hacer esto infinito?
tomexsans

1
Ejemplo de enlace roto.
meshy

2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Entonces puede llamarlo así $('#mydiv').flashUnlimited();: hace lo que Majal respondió anteriormente y se llama a sí mismo al final del ciclo.
Jay Dadhania

46

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


8
Eso es parte de jQueryUI, que es bastante pesado, no parte de la biblioteca jQuery estándar (aunque podría usar el núcleo de efectos de UI, en el que se basa).
UpTheCreek

3
Puede descargar solo el núcleo de efectos + el efecto que desee, que para "resaltar" + "pulsar" asciende a 12 KB. No totalmente ligero, pero tampoco tan pesado.
Roman Starkov

45

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


1
@DavidYell, abra una nueva pregunta y publique un código de muestra. pulsateFunciona bien en Chrome.
SooDesuNe

Parpadea cada 5 segundos: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@all ¿Alguien ahora si esto usa animaciones css3 y / o transforma? Bueno de todos modos (pero aún así prefiero css3 como en una de las otras respuestas)
Martin Meeser

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

1
Esto es simplemente simple y elegante.
Gra

Mientras usa fadeIny fadeOutafecta a otros elementos hermanos porque alterna la displaypropiedad css , en mi caso, se ve raro. Pero este soluciona el problema. Gracias, funciona elegantemente como un encanto.
fsevenm

15

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

12

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

Cambió a var iterationDuration = Math.floor(duration / iterations);para poder dividir por números impares y lo hizo return this;para poder encadenar otros métodos después de él.
user1477388

¿Esto realmente no cambia el color de nada?
noches

12

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

Me encanta esta solución, excepto que el fondo no vuelve a ser lo que solía ser
MrPHP

7

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


7

¿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!


Eso no parpadea en otro color (que se solicitó), esto simplemente desvanece la opacidad dentro y fuera.
Tim Eckel

6

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.


15
Nota: para que esto funcione, debe agregar los efectos de jquery ui. no es parte de core jQuery
travis-146

6

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 .



La demostración está rota, porque la biblioteca js a la que se refiere no existe
PandaWood

@PandaWood He restaurado el enlace al repositorio de GitHub y actualizado la demostración
VonC

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

1
Exactamente. Control simple y completo sobre la aparición y desaparición gradual.
pollaris

5

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)

4

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

4

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.  

3

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


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


2

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


2

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.


2

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>

Si solo haces flashun objeto jQuery, funciona bien. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

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

nota: la animación de colores de fondo requiere el uso del complemento de interfaz de usuario de colores. ver: api.jquery.com/animate
Martlark

1

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

1

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!


¡Cuidado con el mal eval!
Birla

Lo sé, solo necesitaba una solución rápida y sucia. ¡Eval tiene sus usos a veces!
Duncan

1

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


1

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

1

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})
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.