jQuery ¿El efecto de “destello parpadeante” en div?

Estoy buscando una manera de hacer lo siguiente.

Agrego un

a una página, y una callback ajax devuelve algún valor. El

se llena con los valores de la llamada ajax, y el

luego se antepone a otro

, que actúa como una 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

parpadee, no se muestre / oculte, pero para resaltar / no resaltar durante algún tiempo, digamos 5 segundos.

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

Por cierto, la solución tiene que ser multiplataforma, y ​​sí, por desgracia, IE 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 demo se pueden encontrar aquí.

Editar

Tal vez el efecto Pulsate sea más apropiado, ver aquí.

Editar # 2

Para ajustar la opacidad puedes hacer esto:

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

Así que no irá más allá del 50% de opacidad.

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 creé, que usa setInterval y fadeTo

HTML –

 
Box

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 quieran incluir la totalidad de jQuery UI, puede usar jQuery.pulse.js en su lugar.

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

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

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

Si aún no está utilizando la biblioteca de Jquery UI 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.

Esta 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 bucle for, puede tener pulsos de 1 millón, por lo tanto, no está restringido al valor predeterminado de 6 o cuánto es el valor 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); } 

Parpadea fácilmente cualquier elemento de 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 mirar en jQuery UI. En concreto, el efecto más destacado:

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

Usalo asi

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

Si no desea la sobrecarga de jQuery UI, recientemente escribí una solución recursiva utilizando .animate() . Puede personalizar los retrasos y los colores que 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 hacer 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 objective y luego parpadearla.

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

Creo que podrías usar una respuesta similar que di. Lo puedes encontrar 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 usarlos asi

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

fácil 🙂

acaba de dar elem.fadeOut (10) .fadeIn (10);

Pruebe con el complemento jquery.blink.js:

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

    

#¡disfrutar!

  

Échale un vistazo

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