jquery - 在 jQuery 中转换

Question

我正在尝试使用 jquery 获取一个元素来为旋转悬停效果设置动画，我有这个 jsFiddle去测试。到目前为止，我有这个:

$(".icon").hover(function() {
        $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
    },function() {
        $(this).stop().animate({backgroundColor : "black", color: "red"},400);
    });

但它似乎根本没有旋转它，我意识到设置 css 的正确方法是:

-webkit-transform: 旋转(30deg);

我已经试过了:

$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);

但即使是高度也不会改变。任何建议都会有所帮助，谢谢!

Link to the JSFiddle

Answer 1

除了 IE9，所有支持 transform 的浏览器也都支持 transition，所以你最好不要像这样使用 JS:

.icon {
    -webkit-transition:all 400ms;   
    -moz-transition:all 400ms;
    transition:all 400ms; 
    display:block;
    width:100px;
    height:100px;
    background-color:red    
}

.icon:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg)
}

示例:http://jsfiddle.net/9CYET/14/

(我知道这不是您想要的所有属性，但您明白了!如果您还想更改高度，则需要将 transform-origin 设置到正确的位置)。

在 IE9 中旋转时没有动画，而在旧版浏览器中则不会发生任何事情。您可以修改 IE 的过滤器，以便在真正的旧 IE 中也能轮换。