如何同时应用 jQuery UI 效果（滑动+翻转）？答案

【问题标题】：How to apply jQuery UI effect (slide+flip) at the same time?如何同时应用 jQuery UI 效果（滑动+翻转）？
【发布时间】：2012-03-02 02:56:31
【问题描述】：

我这里有一个简单的 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
    });
}

这个效果也很好。

但是，如果我COMBINE两者都行不通。

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

结果是 div 元素先被翻转，然后跳转（无滑动效果）到其结束位置。

有什么解决办法吗？

【问题讨论】：

您找到任何解决方案了吗？我在使用 Nivo Slider 中的翻转效果时遇到了类似的问题
看到这里了吗？ stackoverflow.com/questions/2344804/…

标签： jquery user-interface slide flip

【解决方案1】：

如this post 中所述，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 上的其他帖子！

【讨论】：