Question

我需要突出显示带有文本值的div，以便在单元格中的值发生更改时向用户显示。我需要背景来改变颜色从红色到白色。对于页面加载时已更改的值然后保持白色，我需要它执行此操作一次。实现这一目标的最简单方法是什么？

Answer 1

据我所知，你有div的颜色应该在页面完全加载后改变。

首先要做的是，您可以将初始颜色设置为div，这样当您的网页加载时，它会有red颜色

接下来使用JQuery代码

//This will change color of your div when everything has been totally loaded (text,images, etc.)

window.onload = function(){ $('YOUR DIV').css('color',white);}

希望它能帮到你

Answer 2

一种方法

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
});

@-webkit-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@-moz-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}

.backgroundAnimated{    
    background-image:none !important;
    -webkit-animation: fadeIt 5s ease-in-out; 
       -moz-animation: fadeIt 5s ease-in-out; 
         -o-animation: fadeIt 5s ease-in-out; 
            animation: fadeIt 5s ease-in-out; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>old value
<div id="newContent">New value</div>

<input type="button" value="test" />

HTML背景淡出一次

2 个答案: