使用 jquery 旋转 div 并使用 jquery 添加 css 类答案

【问题标题】：rotating div with jquery and adding css classes with jquery使用 jquery 旋转 div 并使用 jquery 添加 css 类
【发布时间】：2012-09-28 17:49:06
【问题描述】：

我有一个 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);
});
});

【问题讨论】：

你也应该在这里发布代码
您可能需要检查您的 jsFiddle 代码。 css_info_timing 应该使用-webkit-transition，css_info_rotate 应该使用-webkit-transform。另外，css_info_rotate 不是一个类，所以你不应该将toggleClass() 与该变量一起使用。

标签： jquery css transform

【解决方案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');
});

Check the demo

编辑

由于您无权访问 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');
});

Another demo

【讨论】：

所以我需要专门用jquery添加css，然后我还需要对其进行动画处理，这就是为什么我试图用css制作这两个变量。
oo，看起来不错。但是是否可以在 jquery 中添加该类，对不起，我解释得不好。我无权访问 CSS 部分，所以我需要用脚本来完成这一切，这就是为什么我试图用变量来做这件事，哈哈，但是切换似乎不起作用？
@loriensleafs 好的，给我 2 分钟
errr，这遇到了我需要通过 jquery 添加所有 css 的相同问题，我无法访问 css，这就是为什么我尝试使用变量定义它们但失败的原因.
这非常有帮助，非常感谢。最后一个问题，当你添加这样的类时 $("").appendTo("head");任何脚本都可以访问它们吗？或者如果开始一个新脚本，您是否必须再次定义它们？

【解决方案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/

【讨论】：

这个答案对我有帮助！它只是倒带动画。有什么办法可以代替继续旋转，让它旋转 360 度？