如何使用jquery在图像上循环使用css过滤器（在webkit中）

我试图通过在用户加载页面时更改图像上的css过滤器色调旋转属性，将狂野和迷幻的天赋传授给网页。如何使色调旋转以进行更改？我试图将我的解决方案建立在这个已回答的问题上：这个问题在本文中得到了回答

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

我的尝试，甚至还没有尝试合并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

    });

}

---

您有不少语法错误。 我在这里修复了这些：

---

当然有不少。有一分钟，我认为这是css过滤器的一些模糊的功能。很酷！

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

    });

}

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
    });
}