如何同时应用jQuery UI效果(滑动+翻转)

Question

这里有一个简单的div框：

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

我希望它能从浏览器的（外部）左侧平滑地滑入，右侧滑入可视区域。当它滑入时，我还希望div围绕自己的轴翻转一次。

为了做到这一点，我做了以下事情：

首先，我通过css将div设置为可视区域的"外部"：

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

然后，当网站加载时，我应用幻灯片效果：

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

现在，这非常有效。

为了应用翻转效果，我为jquery使用了这个翻转插件：http://lab.smashup.it/flip

要翻转，我执行以下操作：

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

光是这个效果也很好。

但是，如果我组合两者，它将不起作用。

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

结果是div元素首先被翻转，然后跳到它的结束位置（没有滑动效果）。

有什么解决办法吗？

Answer 1

如本文所述，dequeue()需要这样使用：

$(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);
});

感谢allanx2000在Stackoverflow上指向另一篇帖子！