title: How to cycle through css filters on an image with jquery (in webkit)
body: <p>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: <a href="https://stackoverflow.com/questions/16757416/how-to-cycle-through-background-colors-on-hover-with-jquery">How to Cycle Through Background Colors on Hover with jQuery</a> which was answered in this <a href="http://jsfiddle.net/4xPqd/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <pre><code>    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
      });
  
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>My attempt, which doesn't even try to incorporate the onload aspect yet:</p>
  
  <pre><code>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
  
      });
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/izviz/57E4K/" rel="nofollow noreferrer">fiddle</a></p>