jQuery在现有的div之间翻转

我发现了许多jQuery插件，可以让你“翻转”一个元素; SmashUp Labs的Flip!插件似乎最受欢迎/有用，这是我目前使用的。jQuery在现有的div之间翻转

同时，当然在这里和其他地方有很多解决方案可以在两个不同的现有div之间进行切换，但是它们都不涉及翻转。

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

翻转的div的“边”都太大而且很复杂，不能合理地插入到函数调用中，而且我不能使用类似$('div').text()这样的东西，因为它创建了div的副本而不是揭示我已经拥有的一个。

那么，有没有人知道任何图书馆翻转，但允许你指定一个元素在翻转结束后变得可见？或者有人用Flip！做过这种事情，或许使用它的回调函数？

来源

2012-07-26 KRyan

+1让我翻转！ – cbmeeks 2014-06-03 13:58:17

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

例如，你有DIV1和DIV2，在默认情况下，当页面加载，Div1的显示和DIV2具有风格显示：没有，那么你挂钩的回调倒装，如：

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

的两个内容div1和div2位于翻转框的顶部，所以它们看起来像包含。

来源

2012-07-26 17:29:44 Drawyan

这是一种可能性，尽管我对流体设计中的绝对定位持怀疑态度。我会给它一个镜头，让你知道它是如何去通过。 – KRyan 2012-07-26 18:09:32

这实际上运作得非常好。实际上并不需要使用绝对定位，因为隐藏的div不占用空间：我只是将div设置为“width：100％;身高：100％;'因为只有一个人表示，这很好。 – KRyan 2012-07-26 23:10:45

听起来不错，我没有尝试过这个，但我已经尝试过这个技巧，用于这样的其他事情。很高兴它的工作，风格“显示：无”不占用任何空间，但如果你想要占用空间，使用风格“可见性：隐藏”，这将占用隐藏的div的大小，这是非常有用的如果你不想在显示和隐藏期间改变元素的位置。 – Drawyan 2012-07-27 13:06:53

jQuery在现有的div之间翻转

回答

相关问题