JQueryは開始アニメーションを開始する前に回転位置を設定します

Question

のように私の質問にもできると思います。0度以外の初期位置から画像を回転させる方法

イメージの回転を-50degから0degにアニメーション化したいとします。残念ながら、何らかの理由で、JQueryは何があっても最初の位置を0degに設定しました。

My機能：行はコメント

$("#card").css("opacity", 0).animate(
    {opacity: 1, left: 200, top: 400, deg: 0}, 
    { 
     //start: function() {$(this).css("transform", "rotate(-50deg)");}, 
     step: function(go) {$(this).css("transform", "rotate(" + go + "deg)");}, 
     duration: 1000 
    } 
); 

注意してください。それは最初の位置を希望の回転度-50degに設定する無駄な試みでしたので、そこから0degに行くことができました。

どちらかのようなものは役に立ちません。

$("#card").css("opacity", 0).css("transform", "rotate(-50deg)").animate(
    {opacity: 1, left: 200, top: 400, deg: 0}, 
    { 
     step: function(go) {$(this).css("transform", "rotate(" + go + "deg)");}, 
     duration: 1000 
    } 
); 

JQuery.animaterotation(0deg)にカードのプロパティtransformを設定し続けています。

どうすればこの問題を回避できますか？

---

UPDATE

問題を説明するために、このfiddleを作成するためのThe_Death_Rawに感謝します。

をクリックすると、ボタンをクリックすると、アニメーションを開始する前にオブジェクトが0degにどのように戻って回転するのかがわかります。私はそれが起こることを望んでいません。アニメーションはオブジェクトが既に持っている回転から始まりません（フィドル：30deg）。

Answer 1

$(document).ready(function() { 
 
    DoRotate($("#MyDiv1"), 30); // selector, degres to rotate 
 
    AnimateRotate($("#MyDiv2"), 0, 30, 2000); // selector, degres rotate from, degres rotate to, duration 
 
    
 
    $("button").on("click", function() { 
 
     AnimateRotate($("#MyDiv2"), 30, 0, 2000); 
 
     setTimeout(function(){ 
 
     AnimateRotate($("#MyDiv2"), 0, 30, 2000); 
 
     }, 2000); 
 
    }); 
 
}); 
 

 
function DoRotate(element, rotateTo) { 
 
    $(element).css({ 
 
     transform: 'rotate(' + rotateTo + 'deg)' 
 
    }); 
 
} 
 

 
function AnimateRotate(element, rotateFrom, rotateTo, duration){ 
 
    $({deg: rotateFrom}).animate({deg: rotateTo}, { 
 
     duration: duration, 
 
     step: function(now){ 
 
      element.css({ 
 
       transform: "rotate(" + now + "deg)" 
 
      }); 
 
     } 
 
    }); 
 
}

.SomeDiv { 
 
    width:100px; 
 
    height:100px; 
 
    margin:25px 25px; 
 
    display:inline-block 
 
} 
 
.SomeDiv img { 
 
    width:100px; 
 
    height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="MyDiv1" class="SomeDiv"> 
 
    <img src="https://i.pinimg.com/originals/c5/cf/cd/c5cfcde4118dbc6b1c807f879602b9aa.png" alt=""> 
 
</div> 
 
<div id="MyDiv2" class="SomeDiv"> 
 
    <img src="https://i.pinimg.com/originals/c5/cf/cd/c5cfcde4118dbc6b1c807f879602b9aa.png" alt=""> 
 
</div> 
 

 
<button>CLICK</button>