旋转图像OnClick使用jQuery？ [英] Rotate Image(s) OnClick With jQuery?

问题描述

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

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

Hence, a simple HIDDEN TO VISIBLE jQuery Script.

我想知道如何做是有一个图像expand-one类将旋转90度，所以当CLASS为VISIBLE时，图像将面向下，然后一旦它变为HIDDEN，它将旋转回其原始位置。

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.

任何想法吗？

非常感谢！
Aaron

Thank you so much! Aaron

推荐答案

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

这篇关于旋转图像OnClick使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！