Your code as-is is working just fine!
See this fiddle with your code: http://jsfiddle.net/K5NJy/1/
Perhaps, the problem lies where you are swapping classes on the .invert
and .reinvert
element(s):
$(".invert").addClass("reinvert"); // perhaps this is causing unwanted behavior
$(".invert").removeClass("invert"); // perhaps this is causing unwanted behavior
And as @Shivan said, this will work only on webkit based browsers. Others do not support filter in this form.
Edit: (after your requisites of Firefox or Opera)
See this updated fiddle: http://jsfiddle.net/K5NJy/5/
This updated fiddle will work in Chrome, IE9 and Firefox. (I don't have Chrome installed so can't check, but webkit based browsers should anyway support it).
As mentioned above (and also by @Shivan), Firefox (Gecko) supports only the url()
way of filters. So you need an SVG/XML map for that to work.
I lifted Firefox bit of code from here: https://stackoverflow.com/a/19691142/1355315
Also, note that the order of the application of css in your code will affect IE9 and Firefox. Whichever way of filter is applied last will hold. So, if url()
one is applied last, it will work in Firefox but not in IE. So, you will have change that in fiddle to check.
Moreover, for older IE (<9) you will need to use DXImageTransform.Microsoft.Invert
, which is deprecated in IE9 and above.
Hope that helps.