Question

I have a dl where I would like to flip an image in the dt using jQuery on click. This can be quite easily done using static css, but for some reason I cannot achieve the same effect using jQuery’s .css() method. Am I doing something wrong or is this a jQuery quirk?

Here is a JSFiddle link demonstrating the behaviour using both CSS and jQuery.

Sample code without the click event handler. I am just trying to flip the dt itself now for simplicity’s sake.

$('dt').css(
    {
        "color" : "red",
        "transform": "scaleY[-1]",
        "-moz-transform": "scaleY[-1]",
        "-o-transform": "scaleY[-1]",
        "-webkit-transform": "scaleY[-1]",
        "filter": "FlipV",
        "-ms-filter": "FlipV"
    }
    );

Answer 1

Do you not see the difference between [] and ()..

In other words, you need to use parenthesis and not brackets

$('dt').css({
    "color": "red",
    "transform": "scaleY(-1)",
    "-moz-transform": "scaleY(-1)",
    "-o-transform": "scaleY(-1)",
    "-webkit-transform": "scaleY(-1)",
    "filter": "FlipV",
    "-ms-filter": "FlipV"
});

Demo http://jsfiddle.net/gaby/qngrf/379/