2011-02-17 14 views
11

Quiero fadeIn y fadeout color de fondo usando jQuery, intenté a continuación el código, afecta el contenido div completo, necesito agregar el efecto de flash solo para el color de fondo.efecto de flash con jquery

$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800) 
    .fadeout("fast"); 
<div class="countbox">checkout</div> 

¡Probé esto también pero no funciona!

$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800).css("background-color","#FFFFFF"); 

¿Cuál es el problema que alguien puede ayudarme?

Editar

Uy! mi respuesta no se aplica a todas las ventanas. Cuál solo da efecto de flash para la ventana actual, pero necesito obtener el efecto de flash para todas las ventanas. por ejemplo: - Cuando hago clic en el botón, debería darme efecto de flash para div para todas las ventanas, exactamente como en este website.

+0

¿Está confuso "ventana" con "div"? AFAIK, quieres decir que quieres el efecto de flash para todos los elementos con un estilo de CSS particular. –

+0

no estoy hablando de múltiples divs ... esto de la ventana del navegador. Puedes ver la subasta flash aquí ... http://www.beezid.com/ .. ese efecto se aplica cuando un clic en el botón de oferta ... es lo que quiero – Gowri

+2

Entonces, quieres algo para "flashear" ** todos ** navegadores abiertos (en todo Internet) que está viendo esa página web en particular? ¿Te gusta esa página de subastas, que parpadea en todos los navegadores que ven esa página cuando alguien hace una oferta? ¿O como Stack Overflow que muestra un mensaje cuando alguien ha agregado una nueva respuesta? Me temo que has hecho la pregunta incorrecta entonces. Esto requiere XHR/Ajax. –

Respuesta

5

hacer esto en ventanas separadas como usted está mencionando en sus comentarios, que tendrá que tener algún tipo de devolución de datos a un servidor para indicar cuándo ocurrirá esto.

extendiendo la respuesta de omerkirk (que es la forma correcta de hacer este IMO).

hacer un setInterval (function() {. Get();}); que periódicamente recibe información de algún servidor de fondo que almacena el estado actual (por usuario probablemente ...). Cuando el estado actual cambia, usted hace el .animate(); en el fondo de la ventana actual para que coincida con el del servidor de fondo ...

Esto puede ser muy complicado y problemático si tiene varias ventanas de "conducción" en lugar de una sola ventana maestra y x clientes ...

Realmente esta es una mala idea IMO ...

+1

Esto es correcto. Si está intentando hacer esto a través de las ventanas del navegador, necesitará algún tipo de sistema de devolución de datos para hacer la actualización, junto con una forma de sincronizar el parpadeo si así lo desea. –

0

no se pueden animar background-color 's opacity. Puedes animar su color solamente.

Check this plugin.

+0

Hola alex, por favor revisa mi edición ... quiero el efecto de flash para todas las ventanas ... ¡espero que tengas una idea! – Gowri

0

Esto funciona para mí sin ningún plugin

$('.countbox').css("background-color","#FF0000"); 
setTimeout(function() { $('.countbox').css("background-color","#FFFFFF"); },800); 

también podemos color continuo intermitente usando setInterval con colores creados al azar dentro de este método.

+0

¿Has respondido a tu pregunta? – Dawson

+0

sí, eso es antes, pero no funciona en todas las ventanas del navegador, ¡ese es mi problema! – Gowri

0

Esto debería funcionar. Jquery tiene una función animada propia, no tienes que usar ningún complemento.

$(".countbox").animate({backgroundColor: "#ff0000"}, 1000); 

Esto debería animar el color de fondo de su valor inicial a # ff0000 en 1000 ms (1 segundo). Creo que deberías incluir el paquete de animación de jQueryUI.

creo que sirve

+0

omerkirk ya lo intenté. Si funciona en la ventana actual pero no en otra ventana al mismo tiempo que se hace clic en el botón, revisa mi edición – Gowri

+0

@gowri No estoy seguro de lo que quieres decir con todas las ventanas (ventanas del navegador? O múltiples elementos en la misma página?) si se refiere a todas las ventanas del navegador, entonces no creo que eso sea posible. Si se refiere a múltiples elementos en la misma ventana, entonces debería funcionar, lo intenté en varios divs con la misma clase y funcionó como un amuleto. Si edita su publicación con un ejemplo para el código que no funciona, tal vez podamos resolver su problema. – omerkirk

+0

aquí vamos, http: //www.beezid.com/ en este sitio web cualquiera coloca la oferta, el efecto de flash se aplica para el div cuando hago clic en él da el mismo efecto ... quiero decir que necesito ver el efecto de flash en todas las ventanas del navegador ...... – Gowri

1

respuesta actualiza basándose en los comentarios

Esto va a ser un poco más trabajo de lo que probablemente quería que fuera. Necesitarás una base de datos con 2 tablas. Tabla se llevará a cabo identificaciones de las sesiones activas y el cuadro 2 sostendrá mensajes:

tblSessions 
    ID   Int 
    LastSeen  DateTime 
    SessionID  Varchar(255) 

tblMessages 
    ID   Int 
    Timestamp  DateTime 
    SessionID  Varchar(255) 
    Message  Varchar(255) 

Cuando un visitante llega a su página, es necesario comprobar si el visitante tiene un ID de sesión. Si el visitante ya tiene una ID de sesión, actualice la columna LastSeen en la tabla tblSessions. Si el visitante no tiene una ID de sesión, asigne y agréguelo a la tabla tblSessions. Este código debe ejecutarse en todas sus páginas cuando se cargan.

Deberá ejecutar una consulta en la tabla de la base de datos tblSessions para eliminar todas las entradas que tengan un LastSeen anterior a alguna X veces. El valor de X debe ser, por ejemplo, 5 min. Esta consulta podría ejecutarse en la parte superior de cada carga de la página, o en un proceso de backend del servidor.

Ahora, cada vez que desee flashear las pantallas de todos, agregue una entrada en tblMessages para cada entrada en tblSessions. Establezca Timestamp en el momento en que envía el mensaje y establezca Mensaje en "flash".

En el lado de los navegadores en javascript, configure una función de sondeo con setInterval. En sus funciones de sondeo, llame un script ajax a una página del servidor para devolver cualquier mensaje. Este script del lado del servidor debe consultar el tblMessages para ver si hay entradas para el ID de sesión actual y devolverlas. También debería eliminar las entradas de la tabla.

De regreso en su función de búsqueda de javascript, puede verificar el mensaje "Flash" y mostrar la pantalla. Cuanto más frecuentemente se llame a la función de sondeo, más en tiempo real su visitante será, pero más de una carga será en su servidor.

Al igual que con la tabla tbleSessions, querrá eliminar las entradas antiguas de la tabla tblMessages si son más de X +1 min. O obtendrán resultados antiguos en la tabla que pueden causar problemas en el futuro.

Así ... Esto mostrará la pantalla para cualquiera que visite su página, más o menos al mismo tiempo. Digo más o menos porque no hay forma de flashear exactamente al mismo tiempo con el retraso de la red y todos los sondeos en tiempos ligeramente diferentes ... Bueno, no es una forma fácil en cualquier caso.

+0

todos respondiendo lo mismo, pero mi pregunta es diferente, compruebe mi parte de edición ... sí, su código funciona bien, pero el efecto de flash no afecta a todas las ventanas del navegador ... ¡compruebe el comentario de stephen chung que es lo que estoy buscando! – Gowri

+0

Respuesta actualizada para mostrar la página de cada visitante en ruffly al mismo tiempo. – Justin808

+0

lol, 'ruffly' :) –

0

es eso lo que estás buscando? Por favor, vea la demo:

http://jsfiddle.net/naveed_ahmad/GbvGU/

+0

no está afectando a todas las ventanas del navegador – Gowri

+0

¿Por qué no utilizar scriptaculous? Aquí está el enlace: http://madrobby.github.com/scriptaculous/effect-highlight/ –

+0

PD. El sitio que ha recomendado usa el mismo scriptaculous. –

0

Para Flash el fondo en el cliente (solo navegador), puede utilizar jQuery .animate(). Lo usará en la devolución de llamada o como función cuando tenga flash.
Como quiera que el flash suceda en Internet, deberá ejecutar esta animación en todos los navegadores abiertos. Hay 2 formas de hacerlo.

  1. conjunto un tiempo de espera en el cliente, que comprobará los datos del servidor si debería Flash, o no. los inconvenientes de haciendo esto son que debe sondear con bastante frecuencia si desea datos "casi en vivo", y el flash no ocurrirá en al mismo tiempo para .
  2. usted levanta una devolución de llamada del lado del servidor, que notificará a todos los clientes abiertos a flash, cuando los datos han cambiado, pero no podrá hacerlo sin lógica del lado del servidor. para hacer esto con páginas Web ASP.NET leer este http://msdn.microsoft.com/en-us/library/ms178208.aspx
1

Es una respuesta tardía, he encontrado tu post tratando de encontrar mi propio proyecto ^^, he desarrollado, hace un tiempo, un plugin de jQuery que hace exactamente lo quieres hacer.

Es muy fácil de usar:

$("selector").flash() 

Por supuesto que es posible una cierta configuración.

Compruebe la demostración y siéntase libre de usar/tenedor.

https://github.com/MarechJ/jQuery.flash

Cuestiones relacionadas