使用jQuery旋转图像OnClick？

I have this code: http://jsfiddle.net/Q4PUw/2/

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

Hence, a simple HIDDEN TO VISIBLE jQuery Script.

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

What I want to know how to do is have an image in the "expand-one" Class that would rotate 90 Degrees so the image would be facing down while that CLASS is VISIBLE, then once it becomes HIDDEN it would rotate back to it's original spot.

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

Any idea(s) anyone?

任何人的想法？

Thank you so much! Aaron

非常感谢！亚伦

2 个解决方案

#1

You could do this with css: http://jsfiddle.net/Tentonaxe/Q4PUw/6/

你可以用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)"
    });
});

#2

You can do that with plain HTML (it doesnt have ultra slow fading):

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

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

#1