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> se llena con valores de la llamada ajax, y el <div> 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 que <div> parpadee, no que se muestre/oculte, sino que resalte/no resalte durante un 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 multinavegador, y sí, lamentablemente se incluye IE. 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 de jQuery UI sea más apropiado, consulte 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); } });... por lo que no bajará 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 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.