Анимируйте div с помощью jquery: одновременно перемещайте и вращайте - PullRequest
Новая
       23

Анимируйте div с помощью jquery: одновременно перемещайте и вращайте

0 голосов
/ 07 апреля 2019

У меня есть элемент div, который я могу перетаскивать по экрану.Когда я отпущу мышь, я бы хотел, чтобы div опустился вниз страницы (настройка top = 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, но он НЕ вращается каждый раз, когда я его опускаю;кроме того, НЕ одновременно сбрасывается и вращается.

Есть какие-нибудь предложения о том, как заставить его одновременно падать и вращаться?Спасибо!

...