0

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

2 に答える 2

3

ここでは を使用して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');
});

別のデモ

于 2012-09-28T17:56:22.537 に答える
1

このようなことを試してください

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>

于 2012-09-28T18:02:49.593 に答える