2

重複の可能性：
アニメーション要素の変換回転

jqueryを使用してページ内の画像の回転をアニメーション化しようとすると、要素のcssプロパティ「-webkit-transform」を理解できませんでした。何が問題になっていますか？

javascriptコード：

$("body").toggle(
function(){
    $("img").animate(
        {
        opacity:0.5,
        "-webkit-transform":"rotate(180deg)"
        },1000,function(){
            //some function
        }
    );
},
function(){
    $("img").animate(
        {
        opacity:1,
        webkitTransform:"rotate(-180deg)"
        },1000,function(){
            //some function
        }
    );

});

});
4

2 に答える 2

4

jQueryメソッドは変換プロパティをanimate認識しません。この機能をサポートするjQueryプラグインを使用できます。試してみてください。webkitjQuery Transit

于 2012-07-15T21:10:30.060 に答える
1

これを処理するプラグインはたくさんありますが、使用したくない場合は実際に使用する必要はありません。

$.fx.stepすべてのニーズに対応し、非常に便利で学ぶ価値があります。

次に例を示します。

 $.fx.step.webkitRotate = function(fx){
      if(!fx.init){
          var currentRotation = fx.elem.style.webkitTransform;
          currentRotation = currentRotation.split('(')[1];
          currentRotation = currentRotation.split('deg)')[0];
          fx.begin = currentRotation;
          fx.init = true;
      }         
      fx.elem.style.webkitTransform = 'rotate('+fx.pos+'deg)';
 };

次に、次のことができます。

 $("img").animate(
    {
    opacity:1,
    webkitRotate:-180
    },1000,function(){
        //some function
    }
);

それは大雑把な例であり、改良が必要ですが、うまくいけば、あなたはその考えを理解するでしょう。Useinf$.fx.stepを使用すると、カスタムアニメーションパラメータを設定して、DOMまたは変数のあらゆる側面をアニメーション化できます。これを使用してカスタム計算を実行し、アニメーションの次のステップを決定することもできます。例：私は最近$.fx.step、css3グラデーションでカスタムアニメーションを実行していましたが、現在はプラグインがありません。

ローテーションにプラグインを使用する必要がある場合は、次のことをお勧めします：http ://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

しかし、最終的に彼のプラグインは使用$.fx.stepし、自分で学ぶ価値があります。

于 2012-07-15T22:43:01.997 に答える