2

I have found numerous jQuery plugins that allow you to "flip" an element; SmashUp Labs' Flip! plugin seems most popular/useful, and it is what I am currently using.

Meanwhile, there are, of course, numerous solutions here and elsewhere for toggling between two different existing divs, but none of them touch on flipping.

But what I need is for both things to happen. The problem I'm finding with Flip! is that it includes the content as part of the function call, while I actually want to use the flip to toggle between two different existing divs. I've gotten this to look more-or-less right using an iframe but then I'm using a fairly unnecessary iframe and I also have to wait for that frame to load after the flip, which looks bad.

Both "sides" of the flipped div are too large and complex to be reasonably inserted into the function call, and I cannot use something like $('div').text() because that creates a copy of the div rather than revealing the one that I already have.

So, does anyone know of any library that does flipping, but allows you to specify an element to be made visible after the flipping is over? Or has anyone done this kind of thing with Flip!, perhaps using its callback functions?

4

1 回答 1

2

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

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

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

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

于 2012-07-26T17:29:44.943 回答