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

这种效果也很有效。

但是，如果我 COMBINE 两者都无效。

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

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

对此有任何解决方案吗？

Answer 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 上的另一篇文章！

如何同时应用jQuery UI效果（幻灯片+翻转）？

1 个答案: