Question

有什么方法可以通过javascript或css对html文本进行淡化/衰减颜色效果？

现在我从数据库中读取并将文本附加到div，文本最初将是蓝色，并且会在一定时间内（例如5秒）衰减为黑色。

现在我只需将文字附加到div

$('#txtBox1').append("#"+ data.message[i]+ "</br>");

Answer 1

可以使用CSS动画轻松完成。

这是一个例子。

.fading {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fading;
    animation-duration: 1s;
    animation-name: fading;
}
@-webkit-keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}
@keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}

Answer 2

大多数浏览器已support CSS transitions：

#txtBox1 {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
}
#txtBox1.black {
    color:black;
}

要启动颜色效果，您需要添加className black

$('#txtBox1').addClass('black');

的 Fiddle

Answer 3

在现代浏览器中，您可以使用CSS3过渡，如@RienNeVaPlus

所示

在旧版浏览器中，您可以将jQuery UI添加到项目中以添加CSS颜色的动画支持。只有在没有其他所有小部件的情况下才能获得仅包含基本功能的custom jQuery UI build。

Answer 4

（无法在评论中格式化代码，因此发布回复）我试图将RienNeVaPlus的代码修改为以下内容：

$.ajax({...
    success: function(data) {
           for (var i = 0; i < data.message.length; i++) { 
                   txt = "<p id='line"+count+i+"' class='fadingColor'># "+ data.message[i]+ "</p>"
                   $('#txtBox1').append(txt);
                   $('#line'+count+i).addClass('black');
            }
             count = data.count;}

CSS

.fadingColor {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
 }
.fadingColor.black {
    color:black;
}

但它始终显示黑色，来自chrome检查元素：

<p id="line050" class="fadingColor black"># Zone 3 Opened</p>

文本颜色随着时间的推移而衰落

4 个答案: