旋转图像OnClick使用jQuery？

Question

我有这样的代码： http://jsfiddle.net/Q4PUw/2/

因此，一个简单的隐藏可见jQuery脚本。

我想知道如何做的是在旋转90度的“expand-one”类中有一张图像，以便在CLASS可见时图像朝下，然后一旦变为HIDDEN，它将旋转回到原来的位置。

任何想法（s）任何人？

非常感谢！ 亚伦

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（它没有超慢衰落）：

<details> 
<summary>Click Here To Display The Content</summary> 
Hidden Content here, can be rotated with CSS3 
</details> 

在拨弄