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

Posted 2023-05-08

【中文标题】如何同时应用 jQuery UI 效果（滑动+翻转）？

【英文标题】：How to apply jQuery UI effect (slide+flip) at the same time?

【发布时间】：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 中的翻转效果时遇到了类似的问题

看到这里了吗？ ***.com/questions/2344804/…

【参考方案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 指向 *** 上的其他帖子！