如何使用jQuery在图像上的CSS过滤器之间循环（在Webkit中）

Question

I'm trying to impart a wild and psychedelic flair to a webpage by changing the css-filter hue-rotate property on an image when the user loads the page. How do I get hue-rotate to change? I was trying to base my solution on this answered question: How to Cycle Through Background Colors on Hover with jQuery which was answered in this 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
    });

}

But instead of changing the background color on a div I am trying to change hue-rotate on an image within a div. And yes, I want it to change onload, not onmouseenter. I am doing my testing in Chrome but Safari should also work since css filters have been implemented in webkit.

My attempt, which doesn't even try to incorporate the onload aspect yet:

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

You had a fair few syntax errors. I've fixed these here: 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
    });
}