Question

我已经环顾四周，无法决定最好的方法。我尝试动画更改序列中div文本颜色的动画，例如（＃000，#eee，＃fff ...）每1.5秒。

我知道我需要jQuery Color插件作为jQuery本身的补充。

最好的方法是什么？将一个CSS类添加到div并通过它们旋转？

任何帮助都会很棒！

我需要IE7和IE8兼容性

Answer 1

你不需要jQuery，就这样做：

＆＃13;

var colors = ["red","yellow","blue", "green", "purple"]; //Sets Colors
var target = document.getElementById("test"); //Target element
var currentColor = 0;
var time = 1500;//Time between color changes (in ms)
setInterval(function(){
    if( currentColor === colors.length) currentColor = 0;
    target.style.color = colors[currentColor];
    currentColor++;
},time);

＆＃13;

<div id="test">Change color NOW</div>

＆＃13;

Answer 2

与Jacob Gray answer类似但当我说你想要动画颜色变化时，我想到了一些不同的东西。这是一个使用CSS过渡来显示渐进颜色变化的文件。

＆＃13;

var colorIndex = 0;
var colors = ["red", "green", "blue", "#aaa"];
var color = document.getElementById("color");
setInterval(function() {
    if (colorIndex >= colors.length)
        colorIndex = 0;
    color.style.backgroundColor = colors[colorIndex];
    colorIndex++;
}, 1500);

＆＃13;

#color {
    height: 100px;
    width: 100px;
    transition: background-color 1.5s;
    background-color: black;
}

＆＃13;

<div id="color"></div>

＆＃13;

Answer 3

警告：这个答案使用CSS动画或过渡，需要一个体面的浏览器，检查可用性：

动画：http://caniuse.com/#feat=css-animation

过渡：http://caniuse.com/#feat=css-transitions

您也可以尝试CSS动画：

＆＃13;

body {
  background: #333;
}

.text {
  margin-top: 50px;
  text-align: center;
  font-size: 3em;
  -webkit-animation: colorChange 5s infinite; /* Safari 4+ */
  -moz-animation:    colorChange 5s infinite; /* Fx 5+ */
  -o-animation:      colorChange 5s infinite; /* Opera 12+ */
  animation:         colorChange 5s infinite; /* IE 10+, Fx 29+ */
}

@keyframes colorChange {
  0% { color: hsl(0, 100%, 50%); }
  25% { color: hsl(90, 100%, 50%); }
  50% { color: hsl(180, 100%, 50%); }
  75% { color: hsl(270, 100%, 50%); }
  100% { color: hsl(360, 100%, 50%); }
}

＆＃13;

<div class="text">My Text</div>

＆＃13;

你可以使用CSS过渡和jQuery：

＆＃13;

$(function() {
  setInterval(function(){
    // execute every seconds
    $(".text").toggleClass("green");
  },1000);
});

＆＃13;

body {
  background: #333;
}
.text {
  margin-top: 50px;
  text-align: center;
  font-size: 3em;
  transition: color 1s;
  color: #F00;
}

.text.green {
  color: #0F0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">My Text</div>

＆＃13;

更改序列jQuery中的文本颜色

3 个答案:

警告：这个答案使用CSS动画或过渡，需要一个体面的浏览器，检查可用性：