Как изменить цвет в постепенном и постепенном исчезновении в div при обновлении данных с помощью sse - PullRequest
Новая
       1

Как изменить цвет в постепенном и постепенном исчезновении в div при обновлении данных с помощью sse

1 голос
/ 14 апреля 2019

При обновлении данных в div у меня есть эффект постепенного исчезновения, который работает.Но я хочу изменить цвета во время постепенного затухания, чтобы привлечь внимание к изменяющемуся значению.

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

как я могу это сделать?

Это HTML-страница: 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div id="result">Loading data. Please, wait...</div>

        <script type="text/javascript">
            if(typeof(EventSource) !== "undefined") {
                var source = new EventSource("demo_sse.php");

                source.addEventListener('message', function(e) {
                    if (!is_stopped) {
                        $('#result').css('color', 'green');
                        $('#result').fadeOut(1000); 
                        $('#result').css('color', 'red');
                        $('#result').html(event.data + "<br>");
                        $('#result').css('color', 'blue');
                        $('#result').fadeIn(1000);
                    }
                }, false);

                source.addEventListener('open', function(e) {
                    // Connection was opened.
                    //alert('Connection opened');
                }, false);

                source.addEventListener('close', function(e) {
                    // Connection was opened.
                    alert('Connection closed');
                }, false);

                source.addEventListener('error', function(e) {
                    if (e.readyState == EventSource.CLOSED) {
                    // Connection was closed.
                        alert('Connection closed');
                    }
                }, false);

            } else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
            }
        </script>
    </body>
</html>

, и это файл php: 

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "retry: 4000\n";
echo "data: The server time is: {$time}\n\n";
//error_log('XXXX');
flush();
?>

1 Ответ

0 голосов
/ 14 апреля 2019

@ PeterPam - давайте попробуем разбить это на действительно конкретный маленький кусочек головоломки.

Можете ли вы просто написать, что вы собираетесь?

  1. Данныезатухает
  2. новые данные вставляются в элемент
  3. изменение цвета / или затухание с ______ на _______
  4. и т. д.

Топомог бы.:) - вот попытка упростить до наименьшего примера. 

<div id="result">starting thing</div>
<button>do it</button>

.. 

function doThings() {
  $('#result')
    .css('color', 'green')
    .fadeOut(1000)
    .css('color', 'red')
    .html('other-thing')
    .css('color', 'blue')
    .fadeIn(1000)
  ; // (also) you can 'chain' them like this
}

$('button').on('click', doThings);

вот этот пример: https://jsfiddle.net/sheriffderek/8w21gfam/

иВот возможное направление: https://jsfiddle.net/sheriffderek/qmhf3vwL/

.fadeOut(duration, optionalCallback) {} - проверить детали подписи функции.Вы можете использовать обратный вызов.

, чтобы уточнить ожидания анимации.:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...