在 jQuery 中转换
我正在尝试使用 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)
相关文章