jQuery efecto de "resaltado parpadeante" en div?

Estoy buscando una forma de hacer lo siguiente.

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

Me gustaría llamar la atención del usuario, mostrarle que hay algo nuevo en la página.
Quiero <div>que parpadee, no que se muestre / oculte, sino que se resalte / desmarque durante algún tiempo, digamos 5 segundos.

He estado mirando el complemento de parpadeo, pero por lo que puedo ver, solo se muestra / oculta en un elemento.

Por cierto, la solución tiene que ser entre navegadores, y sí, IE desafortunadamente incluido. Probablemente tendré que hackear un poco para que funcione en IE, pero en general tiene que funcionar.

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

Editar :
Tal vez el efecto Pulsate UI de jQuery sea ​​más apropiado, vea aquí

Edición n. ° 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);
  }
});

... para que no disminuya por debajo del 50% de opacidad.

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

Este es un efecto de parpadeo personalizado que creé, que usa setIntervalyfadeTo

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

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

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 que se adapte mejor a su diseño.

Esta también puede ser una función de 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 bucle for, puede tener 1 millón de pulsos, por lo que no está restringido a los 6 predeterminados o cuánto es el predeterminado.

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

Haga parpadear cualquier elemento fácilmente desde su 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

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

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

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

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

Es posible que desee examinar la interfaz de usuario de jQuery. Específicamente, el efecto realce:

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

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

Úselo así

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

Utilizo diferentes colores predefinidos así:

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

y úsalos así

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

fácil :)

Si no desea la sobrecarga de jQuery UI, recientemente escribí una solución recursiva usando .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á el complemento de color para comenzar backgroundColora trabajar .animate(). https://github.com/jquery/jquery-color

Y para proporcionar un poco de contexto, así es como lo llamé. Necesitaba desplazar la página hasta 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); }
    });
});

Creo que le vendría bien una respuesta similar a la que le di. Puede encontrarlo aquí ... https://stackoverflow.com/a/19083993/2063096

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

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

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

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

<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

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>

No pude encontrar exactamente lo que estaba buscando, así que escribí algo tan básico como pude hacerlo. La clase resaltada podría ser simplemente un color de fondo.

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