How to apply jQuery UI effect (slide+flip) at the same time?

Question

I've got a simple div box here:

<div id="tile">foo</div>

I want it to smoothly slide in from the (outside) left of the browser, right into the viewable area. While it slides in, I also want the div to flip once around its own axis.

To accomplish that, I did the following:

First, I set the div to be "outside" of the viewable area via css:

#tile{
 position: absolute;
 left: -500px;
 width: 162px;
 height: 162px;
}

Then, when the website loads, I apply the slide effect:

function slide(){
    $("#tile").animate({"left": "+=500px"}, 600);
}

Now, this works perfectly.

To apply the flip effect, I used this flip plugin for jquery: http://lab.smashup.it/flip

To flip, I do the following:

function flip(){
    var c = $("#tile").html();
    $("#tile").flip({
        direction:'lr',
        content:c
    });
}

This effect alone works great too.

BUT, if I COMBINE both, it won't work.

$(document).ready(function(){
    slide();
    flip();
});

The result is that the div element gets flipped first and then jumps (no slide effect) to its end position.

Any solution to this?

Answer 1

As explained in this post dequeue() needs to be used like this:

$(document).ready(function(){
  var title = $("#tile");
  var content = title.html();
  var slideOps = {"left": "+=500px"};
  var flipOps = { direction: "lr", content: content };

  title.animate(slideOps, 600).dequeue().flip(flipOps);
});

Thanks to allanx2000 for pointing to the other post on Stackoverflow!