启动动画前JQuery设置旋转位置

Question

我想我也可以(或者更好)把我的问题说成是JQuery，如何从一个与0度不同的初始位置旋转图像。

我想动画的图像旋转从-50deg到0deg。不幸的是，由于某种原因，JQuery无论如何都将初始位置设置为0deg。

我的职能：

$("#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.animate一直将卡的属性transform设置为rotation(0deg)。

我怎么才能避免这种情况？

更新

感谢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>

​