使用jQuery旋转图像OnClick？

我有这个代码： http ： //jsfiddle.net/Q4PUw/2/

因此，一个简单的HIDDEN TO VISIBLE jQuery脚本。

我想知道怎么做的是在“expand-one”类中有一个图像可以旋转90度，所以图像面朝下而CLASS是可见的，然后一旦它变成隐藏它就会旋转回它的原始图像点。

任何人的想法？

非常感谢！ 亚伦

Answer 1

你可以用css做到这一点： http ： //jsfiddle.net/Tentonaxe/Q4PUw/6/

$('.expand-one').toggle(function() { $('.content-one').slideDown('slow'); $(this).find("img").css({ "-webkit-transform": "rotate(180deg)", "-moz-transform": "rotate(180deg)", "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)" }); }, function() { $('.content-one').slideUp('slow'); $(this).find("img").css({ "-webkit-transform": "rotate(0deg)", "-moz-transform": "rotate(0deg)", "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)" }); }); 

Answer 2

您可以使用纯HTML（它没有超慢的淡入淡出）来做到这一点：

 
 
Click Here To Display The Content
 Hidden Content here, can be rotated with CSS3