jQuery "destello intermitente" efecto en div?

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

Este es un efecto de parpadeo personalizado que he creado, que utiliza 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 /

Para aquellos que no quieren incluir toda la interfaz de usuario de jQuery, puede usar jQuery.pulso.js en su lugar.

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

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

Es ligero (menos de 1kb), y le permite repetir cualquier tipo de animaciones.

Si aún no está utilizando la biblioteca de interfaz de usuario de Jquery y desea 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 pone este código en un bucle for, puede tener pulsos de 1 millón, por lo que no se restringe al valor predeterminado 6 o cuánto el valor predeterminado ser.

EDITAR: Agregar esto como una función global de jQuery

$.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 lo siguiente

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

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

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

Es posible que desee buscar en la interfaz de usuario de jQuery. Específicamente, el efecto de resaltado:

Http://jqueryui.com/demos/effect /

Dado que no veo ninguna solución basada en jQuery que no requiera bibliotecas adicionales, aquí hay 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);
            }
        });
    });
};

Úsalo así

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

Si no desea la sobrecarga de la interfaz de usuario de jQuery, recientemente escribí una solución recursiva utilizando .animate(). Puede personalizar los retrasos y los 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ás 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 objetivo y luego parpadearla.

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

Creo que le vendría bien una respuesta similar a la que le di. Puedes encontrarlo aquí... https://stackoverflow.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.

Utilizo diferentes colores predefinidos así:

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

Y usarlas así

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

Fácil:)

Solo dale a elem.fadeOut(10).fadeIn (10);

Prueba con jquery.parpadear.js plugin:

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>

#disfruta!

<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

Échale un vistazo -

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