javascript - 一个或多个图像的CSS3背景图像颜色过渡效果

Question

我正在尝试对图像做一些类似警告效果的事情，每隔一段时间将图像柔和地更改为红色，但它不起作用，这只会消失......
有人可以帮我解决这个问题吗？

HTML:

<span id="test" class="ui-icon ui-icon-info state1"></span>

CSS:

.state1 {
    background-color: red;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

.state2 {
    background-color: white;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

JS:

var f = document.getElementById('test');
f.addEventListener("transitionend", updateTransition, true);

 function updateTransition() {
  var el = document.querySelector("span.state1");

  if (el) {
    el.className = "state2";
  } else {
    el = document.querySelector("span.state2");
    el.className = "state1";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

做这样的事情方便吗？还是用这种效果做gif图片最靠谱？

认为 gif 图像的分辨率很差，而且我想放一个像这样的 [20x 网页] 的大列表，我有几个 SetInterval() 函数来更新一些字段。

fiddle :http://jsfiddle.net/JtpxD/1/

谢谢

Answer 1

改变类名

el.className = "state2";

重置类，因此您丢失了 ui-icon ui-icon-info 类。 你会想要

el.className = "ui-icon ui-icon-info state2";

jsfiddle: http://jsfiddle.net/SpacePineapple/ztEk5/