jquery - 使用 jquery 旋转 div 并使用 jquery 添加 css 类

Question

我有一个 div，当您单击它时，我希望它旋转，然后当您再次单击它时，它会旋转回来，这是一个切换。我正在使用 CSS 转换执行此操作，并且还需要使用 jquery 添加类。我将类存储在 vars 中，然后尝试应用它们。这是我正在研究的 jfiddle，提前感谢您的帮助。

http://jsfiddle.net/nzLUS/3/

这是代码：

<div id="beffects_of_yoga_info" style="width:50px;height:50px;background:red;"></div>

jQuery：

$(document).ready(function() {

var css_info_timing = {
"-webkit-transform": "all 1s ease;"
}
var css_info_rotate = {
"-webkit-transition": "rotate(150deg)"
}

$("#effects_of_yoga_info").css(css_info_timing);

$("#effects_of_yoga_info").click(function () {
$("#effects_of_yoga_info").toggleClass(css_info_rotate);
});
});

Answer 1

在这里您正在使用toggleClass，但实际上您是在尝试切换属性！

 $("#effects_of_yoga_info").toggleClass(css_info_rotate);

---

首先，添加这个 css 类：

.rotated {
    -moz-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -o-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}​

然后这个 jQuery 监听器：

$("#effects_of_yoga_info").click(function () {
    $("#effects_of_yoga_info").toggleClass('rotated');
});

检查演示

---

编辑

由于您无权访问 CSS，请使用此代码动态添加规则：

$("<style type='text/css'>.rotated{-moz-transform:rotate(150deg);-webkit-transform:rotate(150deg);-o-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);-moz-transition:all 1s ease;-webkit-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}</style>").appendTo("head");

$("#effects_of_yoga_info").click(function () {
    $("#effects_of_yoga_info").toggleClass('rotated');
});

另一个演示

Answer 2

尝试这样的事情

HTML

<div id="effects_of_yoga_info" style="width:50px;height:50px;background:red;"></div>

CSS

#effects_of_yoga_info{
    -webkit-transition: all 1s
}
.css_info_rotate {
    -webkit-transform:rotate(150deg);
}

jQuery

$(document).ready(function(){
$("#effects_of_yoga_info").click(function () {
        $("#effects_of_yoga_info").toggleClass('css_info_rotate');
    });
}) 

演示 http://jsfiddle.net/Nsryy/

​</p>