Skew is not changing javascript function

Question

I am working on a javascript slider function in which I made a div and skewed it on hover.
Now I just want that on click this skew must be 0 degree and i also want to reset csss value on mouse out function.

Lines of Javascript functions are as foolows:-

        $("#leftHalf").animate ({"transform": "skew(0deg)"});

and my CSS ia as Follows:-

           #leftHalf {
           background: url(../images/banner.jpg);
           width: 100%;
           left: 0px;
           height: 100%;
           -ms-transform: skew(65deg); /* IE 9*/ 
           -webkit-transform: skew(65deg);/* Chrome, Safari, Opera*/ 
           transform: skew(65deg);
           background-size:120%;
           background-repeat:no-repeat;
           }

Can Anybody tell me why my skew is not changing.

Thanks in Advance!

Answer 1

From jQuery api documentation ( https://api.jquery.com/animate/ ):

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

so you can't animate "skew(0deg)", but you can change style of element, and use css3 animations to perform smooth change:

$("#leftHalf").css ({
  "transform": "skew(0deg)",
  "-webkit-transform" : "skew(0deg)", 
  "-ms-transform":"skew(0deg)"
 });

add to css:

#leftHalf {
...
-webkit-transition: -webkit-transform .5s;
-ms-transition: -ms-transform .5s;
transition: transform .5s;
}