0

クリック時に45度回転させようとしているボタンがいくつかありますが、変数を使用しているため（または、これが理由だと思います）、ボタンがクリックされると45度回転し、別のボタンがクリックされると、変数はすでに45度増加しており、90度になります。変数なしでこれを行う方法や、これが起こらないように設定を変更する方法はありますか？

デモのコードとセットアップは次のとおりです：http： //jsbin.com/atinap/16/edit

$(".info_btn").css("-webkit-transition", "-webkit-transform 0.25s ease-in-out");

var info_btn_DEG = 0;

$(".info_btn").toggle(function() {
$(this).closest('.article_wrapper').find('.description').slideDown("250");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("200", 0.65);
}, function() {

$(this).closest('.article_wrapper').find('.description').slideUp("200");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("250", 0.3);
});

これに関するどんな助けも素晴らしい感謝です

4

1 に答える 1

6

すべての要素に1つのグローバル角度を設定するのではなく、各要素に角度を関連付ける必要があります。次を使用して.data()ください。

function increaseAngle(elem) {
    var oldAngle = $(elem).data('angle');
    var newAngle = oldAngle + 45;
    $(elem)
        .css("-webkit-transform", "rotateZ(" + newAngle + "deg)")
        .data('angle', newAngle);
}

$(".info_btn")
    .css("-webkit-transition", "-webkit-transform 0.25s ease-in-out")
    .data('angle', 0);
    .toggle(function() {
        $(this).closest('.article_wrapper').find('.description').slideDown(250);
        increaseAngle(this);
        $(this).fadeTo(200, 0.65);
    }, function() {
        $(this).closest('.article_wrapper').find('.description').slideUp(200);
        increaseAngle(this);
        $(this).fadeTo(250, 0.3);
    });
于 2012-11-08T13:33:14.443 に答える