用jQuery动画div：同时移动和旋转

Question

我有一个div元素，目前可以在屏幕上进行拖放。放开鼠标时，我希望 div下降到页面底部（设置顶部= 80％），但同时同时向左旋转180度 >。

CSS文件：

#myDiv{
    position: absolute;
    background-color: red; 
    width: 14%;
    height: 7%;
    -moz-transition: transform 1s;
    -webkit-transition: transform 1s;
    transition: transform 1s;
}

.flip {
    transform: rotate(-180deg);
}

JS文件：

$(function ready() {
    $("#myDiv").mousedown(myOnMouseDown);
});

globalTopDifference = 0;
globalLeftDifference = 0;

function myOnMouseDown(event){
    event.preventDefault();
    $(this).finish();
    $(this).removeClass(".flip");
    var elementTOP = $(this).position().top;
    var elementLEFT = $(this).position().left;
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    globalTopDifference = mouseY - elementTOP
    globalLeftDifference = mouseX - elementLEFT;
    $(this).mousemove(myOnMouseMove);
}

function myOnMouseMove(event){
    $(this).mouseup(myOnMouseUp);
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    $(this).css({top: mouseY-globalTopDifference, left: mouseX-globalLeftDifference})
}

function myOnMouseUp(event){
    $(this).animate({top: '80%'});
    $(this).toggleClass('flip');
    $(this).off("mousemove");
    $(this).off("mouseup");
}

使用我当前的代码，我已经设法在每次生成mouseUp事件时将其删除，但是不在我每次将其删除时都会旋转；也是不同时下落和旋转。

关于如何使其同时下落和旋转的任何建议？谢谢！