How to cycle through css filters on an image with jquery (in 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

gvee · Accepted Answer · 2013-08-20 15:15:40Z

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

edited Aug 20, 2013 at 15:15

answered Aug 20, 2013 at 15:10

gvee

17.2k42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2651053 Over a year ago

A fair few, for sure. For a minute there, I thought it was some obscure inability of css filters. Very cool!

Collectives™ on Stack Overflow

How to cycle through css filters on an image with jquery (in webkit)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related