我有這樣的代碼: http://jsfiddle.net/Q4PUw/2/旋轉圖像OnClick使用jQuery?
因此,一個簡單的隱藏可見jQuery腳本。
我想知道如何做的是在旋轉90度的「expand-one」類中有一張圖像,以便在CLASS可見時圖像朝下,然後一旦變爲HIDDEN,它將旋轉回到原來的位置。
任何想法(s)任何人?
非常感謝! 亞倫
我有這樣的代碼: http://jsfiddle.net/Q4PUw/2/旋轉圖像OnClick使用jQuery?
因此,一個簡單的隱藏可見jQuery腳本。
我想知道如何做的是在旋轉90度的「expand-one」類中有一張圖像,以便在CLASS可見時圖像朝下,然後一旦變爲HIDDEN,它將旋轉回到原來的位置。
任何想法(s)任何人?
非常感謝! 亞倫
你可以用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)"
});
});
你可以做到這一點與普通的HTML(它沒有超慢衰落):
<details>
<summary>Click Here To Display The Content</summary>
Hidden Content here, can be rotated with CSS3
</details>
在撥弄
,圖像不再處於擴張狀態。 – 2011-12-13 20:40:26