jQuery 在现有 div 之间翻转

Question

我发现了许多 jQuery 插件，可以让你“翻转”一个元素； SmashUp 实验室 Flip!插件似乎最受欢迎/最有用，这也是我目前正在使用的。

与此同时，当然，这里和其他地方有许多解决方案用于在两个不同的现有 div 之间切换，但没有一个涉及翻转。

但我需要的是这两件事都发生。我在 Flip 上发现的问题!是它包含作为函数调用一部分的内容，而我实际上想使用翻转在两个不同的现有 div 之间切换。我使用 iframe 看起来或多或少是正确的，但随后我使用了相当不必要的 iframe 并且我还必须等待该框架翻转后加载，看起来很糟糕。

翻转的 div 的两个“面”都太大且复杂，无法合理地插入到函数调用中，并且我不能使用像 $('div').text() 这样的东西，因为创建 div 的副本，而不是显示我已有的副本。

那么，有谁知道有什么库可以进行翻转，但允许您指定在翻转结束后使其可见的元素吗？或者有人用 Flip! 做过这种事情吗？也许是使用它的回调函数？

Answer 1

您可以尝试将两个 div 放在翻转框的顶部，使用 CSS 绝对位置，以便 div 的内容位于翻转框背景的顶部，看起来就像在框中一样。

例如，您有 div1 和 div2，默认情况下，当页面加载时，div1 正在显示，div2 的样式为 display:none，然后您在 Flip 中挂接回调，如下所示:

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
        $('#div1').hide();
    },
    onEnd: function(){
        $('#div2').show();
    }
});

div1 和 div2 的内容都位于翻转框的顶部，因此它们看起来像是包含在内的。