jQuery move div while flipping?

Question

Sorry if this is an easy one, I'm new to jQuery. I am using the Flip! plugin to rotate a div in place. I would also like to move the div while it is rotating. Currently I am doing this:

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

It does flip the div, but the animation does not run until the flipping is done, and even then it goes all at once. Since I am not very familiar with javascript, I do not know if this is a limitation of the language, or of this particular plugin, or if I am just doing it wrong. Does anyone know of a better way something like this can be done?

Answer 1

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

You can also use onBefore instead of onAnimation if you want the move to begin at the same time as the flip instead of half way through.

Answer 2

I'm assuming that flip must just be using animate under the covers, which by default allows you to queue up multiple animations which then play out in order. To avoid this you can tell an given animation to not queue itself and execute immediately.

So try this:

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

For more information have a look at the API documentation on animate, as well as queue and dequeue.

---

Edit: Ok, looking at the source of the flip plugin I now believe the problem is that when you run flip it actually hides the element (#flipDiv in your case), creates a placeholder clone that it does its flip animation on & then re-shows the original div in its final state. This means that even if you make the animation happen at the same time, it will be animating the hidden div, so it will suddenly reappear either half way through the animation or after it has finished.

You could try instead to animate the clone, which you can access from the onBefore callback like so:

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

Of course that won't actually move the original div, so when the flip finishes your div will still be in the old location, so you'll need to shift that too. If you expect the animate to take the same (or less) time as the flip then you could just set the original's marginLeft directly, otherwise you could animate it too so it stays roughly in sync.