如何使用jQuery在圖像上循環使用css過濾器（在webkit中）

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中進行測試，但由於css過濾器已在webkit中實現，因此Safari也應該可以工作。

我的嘗試，它甚至沒有嘗試以納入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 
    }); 
}