Efeito de “destaque piscando” do jQuery na div?

Estou procurando uma maneira de fazer o seguinte.

Eu adiciono a <div>a uma página, e um retorno de chamada ajax retorna algum valor. O <div>é preenchido com valores da chamada ajax e <div>é, então, anexado a outro <div>, que atua como uma coluna da tabela.

Gostaria de chamar a atenção do usuário, para mostrar a ele que há algo novo na página.
Eu quero <div>que pisque, não mostre / oculte, mas destaque / desmarque por algum tempo, digamos 5 segundos.

Estive observando o plugin blink, mas até onde posso ver, ele só mostra / esconde em um elemento.

Aliás, a solução tem que ser cross-browser e, sim, o IE infelizmente incluído. Provavelmente terei que hackear um pouco para fazê-lo funcionar no IE, mas no geral ele tem que funcionar.

O efeito de realce da interface do usuário jQuery é o que você está procurando.

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

A documentação e a demonstração podem ser encontradas aqui

Editar :
talvez o efeito de pulsação da interface do usuário do jQuery seja mais apropriado, veja aqui

Edição nº 2 :
para ajustar a opacidade, você pode fazer o seguinte:

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

... então não ficará abaixo de 50% de opacidade.

Dê uma olhada em http://jqueryui.com/demos/effect/ . Ele tem um efeito chamado pulsar que fará exatamente o que você deseja.

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

Este é um efeito de piscar personalizado que criei, que usa setIntervalefadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

O mais simples possível.

http://jsfiddle.net/Ajey/25Wfn/

Se você ainda não está usando a biblioteca Jquery UI e deseja imitar o efeito, o que você pode fazer é muito simples

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

você também pode brincar com os números para obter um mais rápido ou mais lento para se ajustar melhor ao seu design.

Esta também pode ser uma função jquery global para que você possa usar o mesmo efeito em todo o site. Observe também que se você colocar este código em um loop for, você pode ter 1 milhão de pulsos, portanto, você não está restrito aos 6 padrão ou a quanto é o padrão.

EDIT: Adicionando isso como uma função jQuery global

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

Pisque qualquer elemento facilmente em seu site usando o seguinte

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

Para aqueles que não desejam incluir todo o jQuery UI, você pode usar jQuery.pulse.js .

Para ter uma animação em loop de mudança de opacidade, faça o seguinte:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

É leve (menos de 1kb) e permite que você faça um loop em qualquer tipo de animação.

Você pode querer dar uma olhada no jQuery UI. Especificamente, o efeito de destaque:

http://jqueryui.com/demos/effect/

Como não vejo nenhuma solução baseada em jQuery que não requeira bibliotecas extras, aqui é uma solução simples um pouco mais flexível do que aquelas que usam fadeIn / fadeOut.

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

Use assim

$('#element').blink(3); // 3 Times.

Eu uso diferentes cores predefinidas como:

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

e usá-los assim

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

fácil :)

Se você não quiser a sobrecarga do jQuery UI, recentemente escrevi uma solução recursiva usando .animate(). Você pode personalizar os atrasos e as cores conforme necessário.

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

É claro que você precisará do plugin de cores para começar backgroundColora trabalhar .animate(). https://github.com/jquery/jquery-color

E para fornecer um pouco de contexto, é como eu o chamei. Eu precisava rolar a página para o meu div de destino e, em seguida, piscar.

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

Acho que você poderia usar uma resposta semelhante a que dei. Você pode encontrá-lo aqui ... https://stackoverflow.com/a/19083993/2063096

• deve funcionar em todos os navegadores, pois apenas Javascript e jQuery.

Nota: Esta solução NÃO usa jQuery UI, há também um violino para que você possa brincar ao seu gosto antes de implementá-lo em seu código.

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

Experimente com o plugin jquery.blink.js:

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

#desfrutar!

<script>
$(document).ready(function(){
    var count = 0;
    do {
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
    } while(count < 10);/*set how many time you want it to flash*/
});
</script

Confira -

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () {

            $('#btnclick').click(function () {
                blinkFont();

                setTimeout(function () {
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                }, 5000);
            });
        });

        function blinkFont() {
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        }

        function setblinkFont() {
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>

Eu não consegui encontrar exatamente o que estava procurando, então escrevi algo tão básico quanto eu poderia fazer. A classe destacada pode ser apenas uma cor de fundo.

var blinking = false; // global scope

function start_blinking() {
    blinking = true;
    blink();
}

function stop_blinking() {
    blinking = false;
}

function blink(x=0) {
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) {
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function(){blink(++x)},500); // increment x and recurse
    }
}