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?

Meu caminho é .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>

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

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

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

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

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

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

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

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

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

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

Que tal uma resposta realmente simples?

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

Pisca duas vezes ... isso é tudo!

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.

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 .

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

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)

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

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.  

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

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

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

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.

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>

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

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

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!

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

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

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

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