我有一个 div,当您单击它时我希望它旋转,然后当您再次单击它时它会旋转回来,一个切换。我正在使用 CSS 转换来执行此操作,我还需要使用 jquery 添加类。我将类存储在 vars 中,然后尝试应用它们。这是我正在研究的 jfiddle,感谢您的提前帮助。
代码如下:
<div id="beffects_of_yoga_info" style="width:50px;height:50px;background:red;"></div>
j查询:
$(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);
});
});
最佳答案
此处您使用的是 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');
});
关于jquery - 使用 jquery 旋转 div 并使用 jquery 添加 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12644921/