Como você faz um elemento "flash" no jQuery

249

Sou novato no jQuery e tenho alguma experiência com o Prototype. No Prototype, existe um método para "piscar" um elemento - ie. destaque-o brevemente em outra cor e faça com que volte ao normal para que os olhos do usuário sejam atraídos para ele. Existe esse método no jQuery? Vejo fadeIn, fadeOut e animar, mas não vejo nada como "flash". Talvez um desses três possa ser usado com entradas apropriadas?

Howard Pinsley
fonte
4
Isso não responde ao OP, mas o código (pouco testado) pode ser útil para futuros pesquisadores do Google (como eu):$.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 22/12/12
3
adicione este css ao elemento: text-decoration:blinke remova-o.
Dementic
Eu coloquei um jsFiddle demonstração aqui que eu acho que é uma resposta melhor do que eu encontradas nesta página: stackoverflow.com/a/52283660/470749
Ryan
Observe que o blink foi oficialmente descontinuado em favor de animações. Verifique em: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Respostas:

318

Meu caminho é .fadein, .fadeout .fadein, .fadeout ......

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

etlds
fonte
14
Não é a solução mais bonita, mas curta, fácil de entender e não requer efeitos / interface do usuário. Agradável!
precisa
21
Eu uso um atraso antes da seqüência fadeIn, fadeOut, algo como $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu
1
os fundos que piscam geralmente parecem brega, ou simplesmente estridentes - especialmente se o item que você está exibindo está sentado sobre um fundo branco liso. tente primeiro antes de adicionar plug-ins coloridos e tentar
exibir
4
O problema com esse método é que esses eventos estão potencialmente se interpondo. Você provavelmente deve colocar cada fadeIn e fadeOut subsequentes em seus respectivos retornos de chamada. Por exemplo: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth 30/09
Cuidado ao usar isso no código de validação que pode ser chamado com freqüência. Se o código é chamado com o timing certo que você pode acabar com um elemento exibição quando não deveria (ou vice-versa)
Chris Pfohl
122

Você pode usar o plugin jQuery Color .

Por exemplo, para chamar a atenção para todas as divs da sua página, você pode usar o seguinte código:

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

Editar - Novo e aprimorado

A seguir, é utilizada a mesma técnica acima, mas possui os benefícios adicionais de:

  • cor e duração do realce parametrizado
  • mantendo a cor de fundo original, em vez de assumir que é branca
  • sendo uma extensão do jQuery, para que você possa usá-lo em qualquer objeto

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

Exemplo de uso:

$("div").animateHighlight("#dd0000", 1000);
curthipster
fonte
4
Também não funciona para mim - você tem certeza de que isso não depende do plug-in de animações em cores? plugins.jquery.com/project/color
UpTheCreek
18
Do jquery docs em .animate (): todas as propriedades animadas devem ter um único valor numérico (exceto conforme indicado abaixo); as propriedades não numéricas não podem ser animadas usando a funcionalidade básica do jQuery. (Por exemplo, largura, altura ou esquerda podem ser animadas, mas a cor de fundo não pode ser.) Então, acho que você está utilizando um plug-in sem perceber.
UpTheCreek
4
Notei que não retornou um objeto. Tentei empilhar esse pequeno efeito (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) e obtive um erro. Eu precisava adicionar "retornar isso"; até o final do método.
Sábio
2
Os documentos oficiais do jQuery dizem que você deve usar o plug-in jQuery.Color () para que isso funcione: github.com/jquery/jquery-color
jchook
3
Na documentação do jquery .animate: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Se você deseja animar cores, PRECISA da UI do jQuery ou de algum outro plugin.
Adam Tomat
101

Você pode usar animações css3 para exibir um 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 você jQuery para adicionar a classe

jQuery(selector).addClass("flash");
vinay
fonte
Solução agradável, se precisar funcionar apenas uma vez. Após a adição da classe, a adição subsequente da classe (logicamente) não resulta na atualização do elemento.
21613
7
A melhor ideia de todas. Eu usei um settimeout para remover a classe 2 segundos após o efeito
insira
6
Aqui está um exemplo de remoção da classe após a animação ter sido concluída, para que você possa continuar piscando. jsfiddle.net/daCrosby/eTcXX/1
DACrosby
Ótimo, isso funciona, mas observe que a propriedade correta para a cor de plano de fundo é 'transparente' em vez de 'nenhuma' se você deseja passar um validador de folha de estilo.
Jan M
1
Observe que todos os navegadores modernos agora suportam as regras regulares @keyframese animation, portanto, não há necessidade de usar nenhuma versão prefixada além de talvez -webkit- (para o navegador Blackberry).
coredumperror
75

Após 5 anos ... (E nenhum plugin adicional é necessário)

Este "pulsa" para a cor desejada (por exemplo, branco), colocando uma cor de fundo div por trás e, em seguida, desbotando o objeto novamente.

Objeto HTML (por exemplo, botão):

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

jQuery (baunilha, sem outros plugins):

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

elemento - nome da classe

primeiro número emfadeTo() - milissegundos para a transição

segundo número emfadeTo() - opacidade do objeto após desbotar / desbotar

Você pode verificar isso no canto inferior direito desta página da web: https://single.majlovesreg.one/v1/

Edite (willsteel) nenhum seletor duplicado usando $ (this) e valores ajustados para executar um flash de forma aguda (conforme solicitado pelo OP).

Majal
fonte
60
fadeTo(0000)Metallica
vulcan raven
2
Suave como manteiga! Melhor solução de todas. Obrigado!
ColdTuna
1
como fazer isso infinito?
tomexsans
1
Link de exemplo quebrado.
meshy 25/01
2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Você pode chamá-lo assim $('#mydiv').flashUnlimited();- ele faz o que Majal respondeu acima e chama a si mesmo novamente no final do ciclo.
Jay Dadhania
46

Você poderia usar o efeito de destaque na UI do jQuery para conseguir o mesmo, eu acho.

Michiel Overeem
fonte
8
Isso faz parte do jQueryUI, que é bastante pesado, não faz parte da biblioteca jQuery padrão (embora você possa usar o núcleo de efeitos da interface do usuário, no qual ele se baseia).
UpTheCreek
3
É possível baixar apenas o núcleo dos efeitos + o efeito desejado, que, para "realçar" + "pulsar", é de 12 KB. Não é totalmente leve, mas também não é tão pesado.
Roman Starkov
45

Se você estiver usando jQueryUI, há pulsatefunção emUI/Effects

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

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

SooDesuNe
fonte
1
@ DavidDell, abra uma nova pergunta e publique um código de exemplo. pulsatefunciona bem no Chrome.
SooDesuNe 03/02/11
Pisque a cada 5 segundos: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.
@all Alguém agora se isso usa animações css3 e / ou transformar? Agradável de qualquer maneira (mas ainda prefiro CSS3 como em uma das outras respostas)
Martin Meeser
18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );
sporkit
fonte
1
Isso é simples e elegante.
Gra
Enquanto estiver usando fadeIne fadeOutafetando outros elementos irmãos porque alterna a displaypropriedade css , pareça estranho no meu caso. Mas este corrigiu o problema. Obrigado, funciona elegantemente como um encanto.
fsevenm em 30/03
15

Você pode usar este plugin (coloque-o em um arquivo js e use-o via tag de script)

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

E então use algo como isto:

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

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

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

}

Isso adiciona um método 'flash' a todos os objetos jQuery:

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

Você pode estender ainda mais o método de Desheng Li, permitindo que uma contagem de iterações faça vários flashes da seguinte maneira:

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

Em seguida, você pode chamar o método com uma hora e um número de flashes:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
Rob Evans
fonte
Alterado para, var iterationDuration = Math.floor(duration / iterations);para que você possa dividir por números ímpares, e o tornou return this;para poder encadear outros métodos depois dele.
user1477388
Isso realmente não muda a cor de nada?
noites
12

Solução jQuery pura.

(não é necessário jquery-ui / animate / color.)

Se tudo o que você deseja é o efeito "flash" amarelo sem carregar a cor 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)
};

O script acima simplesmente faz 1s fadeout amarelo, perfeito para informar ao usuário que o elemento foi atualizado ou algo semelhante.

Uso:

flash($('#your-element'))
hakunin
fonte
Amo esta solução, a não ser o fundo não voltar para o que costumava ser
MrPHP
7

Esta pode ser uma resposta mais atualizada e é mais curta, pois as coisas foram consolidadas um pouco desde este post. Requer jquery-ui-effect-realce .

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

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

rcd
fonte
7

Que tal uma resposta realmente simples?

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

Pisca duas vezes ... isso é tudo!

TonyP
fonte
Isso não pisca em outra cor (que foi solicitada), isso simplesmente diminui a opacidade.
precisa
6

Não acredito que isso ainda não esteja relacionado a essa questão. Tudo o que você precisa fazer:

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

Isso faz exatamente o que você deseja, é super fácil, funciona para ambos show()e hide()métodos.

bthemonarch
fonte
15
Nota: para que isso funcione, é necessário adicionar os efeitos de jquery ui. não faz parte do núcleo do jQuery
travis-146
6

Será que um efeito de pulso(offline) O plugin JQuery é apropriado para o que você está procurando?

Você pode adicionar uma duração para limitar o efeito do pulso no tempo.


Como mencionado pelo JP nos comentários, agora existe seu plugin de pulso atualizado .
Veja o repo do GitHub . E aqui está uma demonstração .

VonC
fonte
A demo está quebrado, porque a biblioteca js se refere à não existe
PandaWood
@PandaWood Eu restaurei o link para o repo GitHub e atualizado a demo
VonC
6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);
yPhil
fonte
1
Exatamente. Controle simples e completo sobre o desvanecimento e desvanecimento.
Pollaris 10/10
5

Encontrei isso muitas luas mais tarde, mas se alguém se importa, parece que essa é uma boa maneira de fazer algo piscar permanentemente:

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

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

Os seguintes códigos funcionam para mim. Defina duas funções de desvanecimento e desvanecimento e coloque-as no retorno de chamada um do outro.

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

O seguinte controla os tempos dos 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);
Sankglory
fonte
4

Eu estava procurando uma solução para esse problema, mas sem depender da interface do usuário do jQuery.

Isto é o que eu criei e funciona para mim (sem plugins, apenas Javascript e jQuery); - Heres o violino de trabalho - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Defina o parâmetro CSS atual no seu arquivo CSS como css normal e crie uma nova classe que apenas lide com o parâmetro para alterar, por exemplo, cor de fundo, e defina-o como '! Important' para substituir o comportamento padrão. como isso...

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

Em seguida, basta usar a função abaixo e passar o elemento DOM como uma string, um número inteiro para o número de vezes que você deseja que o flash ocorra, a classe para a qual deseja mudar e um número inteiro para atraso.

Nota: Se você passar um número par para a variável 'times', você terminará com a classe com a qual começou e, se passar um número ímpar, terminará com a classe alternada. Ambos são úteis para coisas diferentes. Eu uso o 'i' para alterar o tempo de atraso, ou todos disparariam ao mesmo tempo e o efeito seria perdido.

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
fonte
3

Como fadein / fadeout, você pode 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);

Simples e flexível

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

3000 é de 3 segundos

A partir da opacidade 1, ela é reduzida para 0,3, depois para 1 e assim por diante.

Você pode empilhar mais desses.

Apenas o jQuery é necessário. :)

Combinar
fonte
2

Existe uma solução alternativa para o erro de plano de fundo animado. Esta lista inclui um exemplo de um método simples de realce e seu 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

danlee
fonte
2

Se incluir uma biblioteca é um exagero, aqui está uma solução que é garantida para o trabalho.

$('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. Acionador de evento de instalação

  2. Definir a cor de fundo do elemento de bloco

  3. Dentro de setTimeout, use fadeOut e fadeIn para criar um pequeno efeito de animação.

  4. Dentro do segundo setTimeout redefinir a cor de fundo padrão

    Testado em alguns navegadores e funciona bem.

Gene Kelly
fonte
2

Infelizmente, a resposta principal requer a interface do usuário do JQuery. http://api.jquery.com/animate/

Aqui está uma solução JQuery de baunilha

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
fonte
Se você acabou de criar flashum objeto jQuery, ele funciona bem. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn
1

Aqui está uma versão ligeiramente melhorada da solução colbeerhey. Adicionei uma declaração de retorno para que, no verdadeiro formato jQuery, encadeamos eventos depois de chamar a animação. Também adicionei os argumentos para limpar a fila e pular para o final de uma animação.

// 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
fonte
Nota: a animação de cores de plano de fundo requer o uso do plug-in da interface do usuário de cores. Veja: api.jquery.com/animate
Martlark
1

Este pulsará a cor de fundo de um elemento até que um evento de mouseover seja acionado

$.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
fonte
1

Junte tudo isso acima - uma solução fácil para exibir um elemento e retornar à cor original da 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);
}

Use assim:

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

Espero que isto ajude!

Duncan
fonte
Cuidado com o mal eval!
Birla
Eu sei, eu só precisava de uma solução rápida e suja. Eval tem seus usos às vezes!
Duncan
1

Aqui está uma solução que usa uma mistura de animações jQuery e CSS3.

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

Basicamente, você começa alterando a cor para a cor "flash" e, em seguida, usa uma animação CSS3 para deixar a cor desaparecer. Você precisa alterar a duração da transição para que o "flash" inicial seja mais rápido que o desbotamento.

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

Onde as classes CSS são as seguintes.

.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
fonte
1

basta dar elem.fadeOut (10) .fadeIn (10);

ibsenv
fonte
1

Isso é genérico o suficiente para que você possa escrever o código que desejar animar. Você pode até diminuir o atraso de 300ms para 33ms e desbotar cores, 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
fonte
1

você pode usar o plug-in jquery Pulsate para forçar a atenção a qualquer elemento html com controle sobre velocidade, repetição e cor.

JQuery.pulsate () * com demonstrações

inicializador de amostra:

  • $ (". pulse4"). pulsate ({velocidade: 2500})
  • $ (". Botão CommandBox: visible"). Pulsate ({color: "# f00", velocidade: 200, alcance: 85, repetição: 15})
Iman
fonte