javascript - Rotate Image(s) OnClick With jQuery? - Stack Overflow

admin管理员组

文章数量:1332345

I have this code: /

Hence, a simple HIDDEN TO VISIBLE jQuery Script.

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 bees HIDDEN it would rotate back to it's original spot.

Any idea(s) anyone?

Thank you so much! Aaron

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

Hence, a simple HIDDEN TO VISIBLE jQuery Script.

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 bees HIDDEN it would rotate back to it's original spot.

Any idea(s) anyone?

Thank you so much! Aaron

• javascript
• jquery
• image
• css
• rotation

Share Improve this question Follow asked Dec 13, 2011 at 20:26 Aaron BrewerAaron Brewer 3,6771919 gold badges5151 silver badges7979 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could do this with css: http://jsfiddle/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)"
    });
});

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

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

本文标签： javascriptRotate Image(s) OnClick With jQueryStack Overflow