jquery - jQuery - 单击时旋转图像并在下次单击时旋转回来

Question

我有一个小提琴来展示我正在尝试做的事情。

http://jsfiddle.net/LxtmM/

jQuery：

$(".arrow").on("click", function() {
            $(".arrow").toggleClass("rotate").css({ "-moz-transform" : "rotate(-90deg)", "-webkit-transform" : "rotate(-90deg)", "-ms-transform" : "rotate(-90deg)", "-o-transform" : "rotate(-90deg)" });
        });

基本上，我希望它在您单击箭头时旋转 -90 度，然后在下一次单击时旋转回来。我知道这需要某种切换。但我了解到，您可以只切换具有 CSS3 变换旋转的类。

当你点击它时，它会旋转并添加类，如果你再次点击它，它会删除类，但它不会动画回来。我不确定当旋转类被关闭时我是否应该期望它旋转回来，但它仍然无法正常工作。

谢谢！

Answer 1

你错过了toggleClass一点点。您的旋转类应该具有旋转样式。当您调用 时.css()，您是在直接设置元素的 css，这就是为什么只有第一次单击似乎有效的原因 - 它每次都会设置那些精确的 css 样式。旋转类不存在，因此切换它不会改变外观：

http://jsfiddle.net/6xFbF/

$(".arrow").on("click", function () {
    $(this).toggleClass("rotate");
});

...

.rotate {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}