Efeito de “destaque piscando” do jQuery na div?


87

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.


4
Por favor, não. Se necessário, simplesmente realce-o com o efeito de realce ( docs.jquery.com/UI/Effects/Highlight ), mas não o faça piscar.
tvanfosson,

1
@tv Eu acho que dois ou três "piscadas" curtos (onde um "piscar" é algo sutil, como um brilho de borda animado ou algo assim) são OK e não irritantes, mas definitivamente piscando antiquado por um longo período de o tempo seria ruim.
Pointy

1
Hehe, eu sei que piscar é irritante, mas na verdade tem um propósito aqui. Não se espera que o usuário fique sentado perto do monitor o dia todo, então ele tem que ver se algo mudou à distância
ZolaKt

25
Vocês são hilários. As páginas da web são usadas apenas para o que vocês acham que estão certos? Não quero destacar, preciso piscar porque estou escrevendo uma página do monitor de processo para ser exibida em uma TV de grande formato e precisa piscar em vermelho e continuar para que os olhos das pessoas sejam atraídos para ela.
Bmo

Respostas:


173

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.


1
Pulsar é o que procuro. Muito obrigado. Há alguma maneira de impedir que desapareça completamente. Apenas para desaparecer, digamos, a opacidade de 50%? Talvez apenas para efeito de realce da cadeia algumas vezes?
ZolaKt


29

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/


1
Funciona muito bem! E nenhuma IU JQuery necessária.
Pavel Vlasov

ótima solução! funciona sem problemas usando Jquery. Obrigado
Site digital de

É a melhor solução aqui!
Desenvolvedor

A melhor solução aqui!
w3spi

19

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

18

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.


1
Ainda requer jQuery UI "Effects"
Jerome Jaglale

1
@JeromeJaglale Eu o uso sem o jQuery UI, já que a mudança de opacidade pode ser feita somente no jQuery. Deve ser o mesmo para você, a menos que você esteja usando animações específicas do jQuery UI.
lulalala

1
Bom ponto. Fui enganado pela primeira demonstração (texto pulsando em vermelho), que requer efeitos de interface do usuário jQuery.
Jerome Jaglale

Apenas uma nota. Você só precisa incluir jquery.color.jspara o material de cor.
Dave


6

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.

1

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


0

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

0

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.


0

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


FadeOut / FadeIn esconde / mostra o elemento no final que não é o que eu estava procurando. Eu precisava aumentar / diminuir a opacidade da cor sem esconder o elemento
ZolaKt

Não, elem.show (). Hide () faz isso. FadeOut / FadeIn altera a opacidade. Você pode alterar a duração do fadeOut / fadeIn para obter o efeito necessário. Porém, ele esconde o elem uma vez.
ibsenv

0

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!


0
<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

0

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>

0

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
    }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.