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

发布于 2025-01-03 16:26:57 字数 990 浏览 4 评论 0原文

我这里有一个简单的 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 元素首先翻转，然后跳转（无滑动效果）到其结束位置。

有什么办法解决这个问题吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妄司 2025-01-10 16:26:57

正如这篇文章 dequeue()<中所解释的/code> 需要这样使用：

$(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 上的其他帖子！

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!

回复收藏 0 原文

~没有更多了~