不改变javascript函数

Question

我正在开发一个javascript滑块函数，在这个函数中我做了一个div并在悬停时对它进行了倾斜。

现在我只想点击这个斜度必须是0度，我也想要重置csss值上的鼠标退出功能。

Javascript函数的行是愚蠢的：-

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

我的CSS如下：-

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

谁能告诉我为什么我的斜度没有改变。

提前谢谢！

Answer 1

来自jQuery api文档(https://api.jquery.com/animate/)：

所有动画属性都应该动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的jQuery功能进行动画(例如，宽度、高度或左侧可以动画，但背景色不能动画，除非使用jQuery.Color()插件)。除非另有规定，属性值被视为若干像素。在适用的情况下，可以指定单位em和%。

因此，您不能动画“斜(0deg)”，但您可以更改元素的样式，并使用css3动画来执行平滑的更改：

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

在css中添加：

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