jQuery переместить div во время переворачивания?

Question

Извините, если это легко, я новичок в jQuery. Я использую плагин Flip! , чтобы вращать div на месте. Я также хотел бы переместить div, пока он вращается. В настоящее время я делаю это:

        $("#flipDiv").flip({
            direction:'lr',
            content:newContent
        });
        $("#flipDiv").animate({
            'marginLeft' : "+=150px"
        });

Он переворачивает div, но анимация не запускается до тех пор, пока не будет выполнено переворачивание, и даже тогда все происходит сразу Поскольку я не очень хорошо знаком с javascript, я не знаю, является ли это ограничением языка или данного конкретного плагина, или я просто делаю это неправильно. Кто-нибудь знает, как лучше сделать что-то подобное?

Answer 1

Я предполагаю, что flip просто должен использовать animate под обложками, что по умолчанию позволяет ставить в очередь несколько анимаций, которые затем воспроизводятся по порядку. Чтобы избежать этого, вы можете указать данной анимации, чтобы она не ставилась в очередь и выполнялась немедленно.

Так попробуйте это:

$("#flipDiv").flip({
 direction:'lr',
 content:newContent
});
$("#flipDiv").animate({
 'marginLeft' : "+=150px"
}, {queue: false});

Для получения дополнительной информации ознакомьтесь с документацией API по animate, а также queue и dequeue.

---

Редактировать : Хорошо, глядя на источник плагина flip, я теперь считаю, что проблема в том, что когда вы запускаете flip, он фактически скрывает элемент (#flipDiv в вашем случае), создает клон-заполнитель, на котором выполняется анимация переворачивания, а затем повторно показывает исходный элемент div в своем окончательном состоянии. Это означает, что даже если вы сделаете анимацию одновременно, она будет анимировать скрытый div, поэтому он внезапно появится либо на полпути анимации, либо после ее завершения.

Вместо этого вы можете попробовать анимировать клон, к которому вы можете получить доступ из обратного вызова onBefore, например:

$("#flipDiv").flip({
  direction:'lr',
  content:newContent,
  onBefore: function(clone) {
    clone.animate({ 'marginLeft' : "+=150px" }, {queue: false});
  })
});

Конечно, это на самом деле не будет перемещать исходный div, поэтому, когда переворот закончится, ваш div будет по-прежнему находиться в старом месте, так что вам придется его тоже сдвинуть. Если вы ожидаете, что анимация займет то же (или меньшее) время, что и переворачивание, вы можете просто установить marginLeft оригинала напрямую, в противном случае вы также можете анимировать его, чтобы он оставался примерно синхронизированным.

Answer 2

$("#flipDiv").flip({
    direction:'lr',
    content:newContent,
    onAnimation: function(){
         $(this).animate({
               left: '+=150px'
         });
    }
})

Вы также можете использовать onBefore вместо onAnimation, если хотите, чтобы перемещение начиналось одновременно с переворотом, а не на полпути.