Flash-эффект с jquery

Я хочу fadeIn и fadeout backgroud-color с помощью jQuery, я попробовал под кодом, он влияет на полный контент div, мне нужно добавить эффект вспышки только для backgroud-color.

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

Я тоже пробовал это, но он не работает!

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

Какая проблема может мне помочь!

Edit

упс! мой ответ не применяется ко всем окнам. Который только дает эффект вспышки для текущего окна, но мне нужно получить эффект вспышки для всего окна. например:- Когда я нажимаю кнопку, он должен давать мне эффект вспышки для div для всех окон, точно так же, как на этом сайте.

ОТВЕТЫ

Ответ 1

чтобы сделать это в отдельных окнах, как вы упоминаете в своих комментариях, вам нужно будет иметь какую-то обратную передачу на сервер, чтобы сигнализировать, когда это произойдет.

расширение ответа omerkirk (что является правильным способом для этого IMO).

выполните setInterval (function() {. get();}); который периодически получает информацию от некоторого фонового сервера, который хранит текущее состояние (на пользователя, вероятно,...). Когда текущее состояние изменяется, вы делаете .animate(); в текущем окне фона в соответствии с фоном сервера...

Это может стать очень сложным и проблематичным, если у вас несколько "управляющих" окон вместо одного главного окна и x клиентских...

На самом деле это плохая идея ИМО...

Ответ 3

Ответ обновлен на основе комментариев

Это будет немного больше работы, чем вы, вероятно, хотели. Вам понадобится база данных с двумя таблицами. Таблица будет содержать активные идентификаторы сеансов, а таблица 2 будет содержать сообщения:

tblSessions
   ID            Int
   LastSeen      DateTime
   SessionID     Varchar(255)

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

Когда посетитель приходит на вашу страницу, вам нужно проверить, имеет ли посетитель идентификатор сеанса. Если у посетителя уже есть идентификатор сеанса, обновите столбец LastSeen в таблице tblSessions. Если у посетителя нет идентификатора сеанса, назначьте его и добавьте в таблицу tblSessions. Этот код должен запускаться на всех ваших страницах при загрузке.

Вам нужно будет запустить запрос в таблице базы данных tblSessions, чтобы удалить все записи с LastSeen старше, чем некоторое время X. Значение X должно быть указано 5 мин. Этот запрос может выполняться в верхней части каждой загрузки страницы или в процессе работы с сервером.

Теперь, когда вы хотите, чтобы все экраны были экранированы, вы добавляете запись в tblMessages для каждой записи в tblSessions. Установите Timestamp на время отправки сообщения и установите для сообщения "flash".

На стороне браузеров в javascript настройте функцию опроса с помощью setInterval. В своих функциях опроса вызовите ajax script на серверную страницу для возврата любых сообщений. Эта сторона сервера script должна запросить tblMessages для любых записей для текущего идентификатора сеанса и передать их обратно. Он также должен удалить записи из таблицы.

Вернувшись в функцию опроса javascript, вы можете проверить сообщение "Вспышка" и прожечь экран. Чем чаще функция опроса называется более реальным, ваш посетитель будет, , но больше нагрузки будет только на вашем сервере.

Как и в таблице tbleSessions, вы захотите удалить старые записи из таблицы tblMessages, если они закончили, скажем, время X +1 мин или вы получите старые результаты в таблице, которые могут вызвать проблемы с дорога.

Итак.. Это запустит экран для тех, кто посещает вашу страницу, примерно в то же время. Я говорю грубо, потому что нет возможности мгновенно вспыхнуть с сетевым отставанием, и каждый опрос в несколько разное время.... Ну, во всяком случае, легкий способ.

Ответ 4

Это поздний ответ, я нашел ваше сообщение, пытаясь найти мой собственный проект ^^, который я разработал некоторое время назад, плагин jQuery, который делает именно то, что вы хотите сделать.

Он очень прост в использовании:

$("selector").flash()

Конечно, возможна некоторая конфигурация.

Проверьте демонстрацию и не стесняйтесь использовать /fork.

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

Ответ 6

Это работает для меня без плагинов

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

мы можем также непрерывно мигать цветом, используя setInterval со случайно создаваемыми цветами внутри этого метода.

Ответ 7

Это должно сработать. JQuery имеет собственную функцию анимации, вам не нужно использовать какой-либо плагин.

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

Это должно анимировать ваш фоновый цвет от его начального значения до # ff0000 в 1000 мс (1 секунда). Я думаю, вы должны включить пакет анимации из jQueryUI.

Надеюсь, что это поможет

Ответ 9

Чтобы замаскировать фон на клиенте (один браузер), вы можете использовать jquery .animate(). Вы будете использовать это при обратном вызове или как функцию, когда она должна мигать.
Как вы хотите, чтобы вспышка произошла по всему Интернету, вам нужно запустить эту анимацию во всех открытых браузерах. Есть два способа сделать это.

  • установить тайм-аут на клиенте, который проверит данные сервера, он должен мигать, или нет. нижние стороны это значит, что вы должны опросить довольно часто, если вы хотите "почти живые "данные, а вспышка не будет происходят в одно и то же время для все.
  • вы повышаете обратный вызов на стороне сервера, который будет уведомлять всех открытых клиентов о включении, когда данные изменились, но вы не сможете это сделать без логики на стороне сервера. для этого с веб-страницами ASP.NET читайте это http://msdn.microsoft.com/en-us/library/ms178208.aspx