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（）插件）。属性值被视为a 除非另有说明，否则为像素数。单位em和％可以在适用的地方指定。

因此您无法为“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;
}

歪斜不改变javascript功能

1 个答案: