7

div をアニメーション化し、y 軸を中心に 180 度回転させようとしています。次のコードを呼び出すと、jQuery エラーが発生します。

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

「Uncaught TypeError: Undefined のプロパティ 'defaultView' を読み取れません」と表示され、jQuery ファイル自体にあると表示されます...何が間違っていますか?

4

4 に答える 4

5

CSS クラスで回転を事前定義し、jQuery を使用してクラスを追加/削除することもできます。

CSS:

#my_div {
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.rotate {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery:

$("#my_div").addClass('rotate');
于 2013-11-26T11:03:07.783 に答える
4

これを試して：

$('#myDiv').animate({ textIndent: 0 }, {
    step: function(go) {
      $(this).css('-moz-transform','rotate('+go+'deg)');
      $(this).css('-webkit-transform','rotate('+go+'deg)');
      $(this).css('-o-transform','rotate('+go+'deg)');
      $(this).css('transform','rotate('+go+'deg)');
    },
    duration: 500,
    complete: function(){ alert('done') }
});

http://jsfiddle.net/RPSzb/2/

于 2012-06-10T04:24:45.053 に答える
2

jQuery はそのままでは変換プロパティをアニメーション化できません。ただし、次の関数を使用して、カスタム プロパティをアニメーション化.animate()し、「手動で」変換を行うことができます。step

var $myDiv = $("#my_div"),
    ccCustomPropName = $.camelCase('custom-animation-degree');
$myDiv[0][ccCustomPropName ] = 0; // Set starting value
$myDiv.animate({ccCustomPropName : 180},
    {
        duration: 500,
        step: function(value, fx) {
            if (fx.prop === ccCustomPropName ) {
                $myDiv.css('transform', 'rotateY('+value+'deg)');
                // jQuery will add vendor prefixes for us
            }
        },
        complete: function() {
            // Callback stuff here
        }
    });

実際の例については、このフィドルを参照してください(青いボックスをクリックしてください)。

これは未定義の回答に似ていますが、実際の CSS プロパティを悪用しません。

注:カスタム プロパティの名前はjQuery.camelCase()名にする必要があります。これ.animate()は、キャメル ケースの名前を内部で使用し、キャメル ケースの名前を使用してプロパティの現在の値を格納し、これfx.propもキャメル ケースの名前になるためです。

于 2014-02-16T20:10:40.130 に答える