color - jQuery "efecto de resaltado parpadeante" en div?

jquery ui effects

Question

Estoy buscando una manera de hacer lo siguiente.

Agrego un <div> a una página, y una devolución de llamada ajax devuelve algún valor. El <div> está lleno de valores de la llamada ajax, y el <div> se antepone a otro <div> , que actúa como columna de la tabla.

Me gustaría llamar la atención del usuario para mostrarle que hay algo nuevo en la página.
Quiero que <div> parpadee, que no se muestre / esconda, sino que se resalte / deje de destacar durante un tiempo, digamos 5 segundos.

He estado mirando el complemento blink, pero hasta donde puedo ver, solo se muestra / oculta en un elemento.

Por cierto, la solución tiene que ser de navegador cruzado, y sí, IE lamentablemente incluido. Probablemente tenga que hackear un poco para que funcione en IE, pero en general tiene que funcionar.

Answer 1

Como no veo ninguna solución basada en jQuery que no requiera bibliotecas adicionales aquí, es una simple que es un poco más flexible que las que usan 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);
            }
        });
    });
};

Úselo así

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

Answer 2

Creo que podrías usar una respuesta similar que di. Puede encontrarlo aquí ... https://.com/a/19083993/2063096

• debería funcionar en todos los navegadores, ya que solo Javascript y jQuery.

Nota: Esta solución NO utiliza jQuery UI, también hay un violín para que pueda jugar a su gusto antes de implementarlo en su código.

Answer 3

Eche un vistazo a http://jqueryui.com/demos/effect/ . Tiene un efecto llamado pulsate que hará exactamente lo que quieras.

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

Answer 4

Es posible que desee examinar jQuery UI. Específicamente, el efecto de resaltado:

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

Answer 5

Este es un efecto de pestañeo personalizado que creé, que usa setInterval y fadeTo

HTML -

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

JS -

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


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

Tan simple como se pone.

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

Answer 6

Para aquellos que no desean incluir toda la interfaz de usuario de jQuery, puedes usar jQuery.pulse.js en jQuery.pulse.js lugar.

Para tener una animación de bucle de cambio de opacidad, haga esto:

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

Es liviano (menos de 1kb) y le permite realizar bucles de cualquier tipo de animaciones.

Answer 7

Pruebe con el 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>

#¡disfrutar!

Answer 8

Si aún no está utilizando la biblioteca Jquery UI y quiere imitar el efecto, lo que puede hacer es muy simple

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

también puede jugar con los números para obtener uno más rápido o más lento para adaptarse mejor a su diseño.

Esto también puede ser una función jquery global para que pueda usar el mismo efecto en todo el sitio. También tenga en cuenta que si coloca este código en un ciclo for, puede tener impulsos de 1 milion, por lo tanto, no está restringido al valor predeterminado 6 ni a la cantidad predeterminada.

EDITAR: Agregar esto como una función jQuery global

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

Parpadea cualquier elemento fácilmente desde tu sitio usando la siguiente

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

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

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

Answer 9

Si no desea la sobrecarga de jQuery UI, recientemente escribí una solución recursiva utilizando .animate() . Puede personalizar los retrasos y colores según lo necesite.

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

        }
    });
}

Por supuesto, necesitará el complemento de color para que backgroundColor funcione con .animate() . https://github.com/jquery/jquery-color

Y para proporcionar un poco de contexto, así es como lo llamé. Necesitaba desplazar la página a mi div de destino y luego parpadear.

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

Answer 10

Utilizo diferentes colores predefinidos como ese:

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

y úsalos así

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

fácil :)

Answer 11

jQuery UI Highlight Effect es lo que estás buscando.

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

La documentación y la demostración se pueden encontrar docs.jquery.com/UI/Effects/Highlight

Editar

Quizás el efecto Pulsate sea más apropiado, mira here

Editar # 2

Para ajustar la opacidad, puede hacer esto:

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

Por lo tanto, no será inferior al 50% de opacidad.

Answer 12

simplemente dale elem.fadeOut (10) .fadeIn (10);

Answer 13

Compruébalo -

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

Answer 14

<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