旋轉圖像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> 

在撥弄