問題描述

我正在嘗試使用 jquery 獲得一個元素來動畫旋轉懸停效果，我有這個 jsFiddle 去測試.到目前為止，我有這個:

I'm trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddle going to test. So Far I have this:

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

但它似乎根本沒有旋轉它，我意識到設置 css 的正確方法是:

But it doesn't seem to be rotating it at all, I realize the proper way to set the css is:

-webkit-transform: 旋轉(30度);

-webkit-transform: rotate(30deg);

我試過了:

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

但即使是高度也不會改變.任何建議都會有所幫助，謝謝！

but then even the Height doesn't change. any advice would help thanks!

鏈接到 JSFiddle

推薦答案

使用優秀的 jQuery Rotate 插件.http://code.google.com/p/jqueryrotate/.所有主流瀏覽器都支持它

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

要旋轉圖像，您需要做的就是 $('#myImage').rotate(30)//用于 30 度旋轉其中 #myImage 是您要旋轉的元素的 id.

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

要動畫旋轉，你可以使用 setTmeout ex:

To animate rotation, you can use setTmeout ex:

setTimeout(function() { $('#myImage').rotate(30) },5)

這篇關于在 jQuery 中轉換的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！