Question

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

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样式。 rotate类不存在，因此切换它不会改变外观：

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

jQuery - 单击时旋转图像并旋转下一次单击

1 个答案: