Question

在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();
?>

Answer 1

@PeterPam-让我们尝试将其分解为一个非常具体的小难题。

您能写下您要做什么吗？

数据消失
新数据已插入到元素
颜色从______变为/或从________淡化
等...

那会有所帮助。：）-这是尝试简化为最小的示例。

<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) {}-签出功能签名的详细信息。您可以使用回调。

有助于充实动画期望。：）

使用sse更新数据时如何在div中的淡入和淡出中更改颜色

1 个答案: