javascript - 倾斜不会改变 javascript 函数

Question

我正在开发一个 javascript slider 函数，我在其中制作了一个 div 并在悬停时将其倾斜。
现在我只希望在单击时此倾斜必须为 0 度，我还想重置鼠标上的 csss 值输出函数。

Javascript 函数行就像傻瓜一样:-

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

和我的 CSS ia 如下:-

           #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/):

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.

所以你不能动画“skew(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;
}