使用jQuery在单击时旋转图像？

Question

我有这段代码：http://jsfiddle.net/Q4PUw/2/ 因此，这是一个简单的隐藏到可见的jQuery脚本。

我想知道如何在“expand-one”类中添加一张图片，并将其旋转90度，使该类显示时图片向下面，然后一旦它变为隐藏状态，它就会恢复到原来的位置。

有任何想法吗？

非常感谢！ Aaron

- Aaron Brewer

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)"
    });
});

- Kevin B

---

在那个fiddle中，图片不再处于expand-one状态。 - Kevin B

这是最新的 JSFiddle，其中包含您最新的 DOM：http://jsfiddle.net/Tentonaxe/Q4PUw/8/ - Kevin B

谢谢，现在我正在尝试为旋转获得动画效果。我知道你是对的 =)。我最近在SO上注意到了你，你的答案总是非常准确。 - mrtsherman

好的，我得到了我想要的。丑陋。但是出于好奇心而做。http://jsfiddle.net/Q4PUw/11/ 看起来没有本地jQuery或CSS的方法来实现这一点。 - mrtsherman

这是我的fiddle，使用你上次发布的fiddle中的html进行了更新：http://jsfiddle.net/Tentonaxe/Q4PUw/13/ - Kevin B

Answer 2

你可以使用纯HTML来实现这个功能（它不会有超慢的淡入淡出效果）：

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

- juancarlospaco