0

だから私はjQueryとCSS3操作でDIVを回転させる方法の良い例を見てきました、私の問題は今私がdivに滑らかなホバー効果を作成しようとしているので、DIVが-15度にバックワードする必要があるということです15度に転送します。

この例では、ボタンのクリックにこのエフェクトを添付しています。

何が起こるかというと、最初に「bk」を押したときにdivがスナップし、その後「fwd」を押したときに再びスナップするように見えます。

理由がわからないようです。

http://jsfiddle.net/ZnvKs/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    border-spacing:0px;
}


$('#bk').click(function() {

    $('.red').animate({
        borderSpacing: -15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');
});

$('#fwd').click(function() {

    $('.red').animate({
        borderSpacing: 15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');

});​
4

1 に答える 1

2

step関数をデバッグすると、2回発生します。最初はnowパラメーターの値が0で、次回は値が15です。

あなたはそれをすべて必要としますか？クラスを更新することで、CSSだけでも同じことができます。

アップデート：

これはスクリプトです：

http://jsfiddle.net/carlosmartinezt/ZnvKs/3/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    -webkit-transition: 0.5s linear;
    border-spacing:0px;
}
.red.bk{
    -webkit-transform: rotate(-15deg);
}
.red.fw{
    -webkit-transform: rotate(15deg);
}​

次に、スクリプトが簡略化されます

$('#bk').click(function() {
    $('.red').removeClass("fw").addClass("bk");
});

$('#fwd').click(function() {
    $('.red').removeClass("bk").addClass("fw");

});​
于 2012-10-17T09:49:21.600 に答える