jquery - 如何使用 jquery(在 webkit 中)在图像上循环使用 css 过滤器

Question

我试图通过在用户加载页面时更改图像上的 css-filter hue-rotate 属性来为网页赋予狂野和迷幻的风格。我如何让色调旋转改变？我试图将我的解决方案基于这个已回答的问题:How to Cycle Through Background Colors on Hover with jQuery在这个 fiddle 中得到了回答.

    var counter = 0;
var colors = [
    "#eeeeee",
    "#00ff00",
    "#ff0000",
    "#000000"];

var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
    interval = window.setInterval(changeColor, 1000);

}).mouseleave(function () {
    window.clearInterval(interval);
});

function changeColor() {
    var color = colors.shift();
    colors.push(color);
    $div.css({
        "background-color": color
    });

}

但是我没有更改 div 上的背景颜色，而是尝试更改 div 中图像的色调旋转。是的，我希望它改变 onload，而不是 onmouseenter。我正在 Chrome 中进行测试，但 Safari 应该也可以工作，因为 webkit 中已经实现了 css 过滤器。

我的尝试，甚至还没有尝试合并 onload 方面:

var counter = 0;
var filters = [
    "hue-rotate(99deg)",
    "hue-rotate(22deg)",
    "hue-rotate(144deg)",
    "hue-rotate(270deg)";

var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
    interval = window.setInterval(changeFilter, 1000);

}).mouseleave(function () {
    window.clearInterval(interval);
});

function changeFilter() 
    var filter = filters.shift();
    filters.push(filter);
    $div.css({

    "-webkit-filter": filter

    });

}

fiddle

Answer 1

您有一些语法错误。我在这里修复了这些:http://jsfiddle.net/gvee/57E4K/4/

var counter = 0;
var filters = ["hue-rotate(99deg)"
              , "hue-rotate(22deg)"
              , "hue-rotate(144deg)"
              , "hue-rotate(270deg)"];

var div = $('#coloredDiv');
var interval;

div.hover(function () {
    interval = window.setInterval(changeFilter, 1000);
}, function () {
    window.clearInterval(interval);
});

function changeFilter() {
    var filter = filters.shift();
    filters.push(filter);
    div.css({
        '-webkit-filter': filter
    });
}