我发现了许多 jQuery 插件,可以让你“翻转”一个元素; SmashUp 实验室 Flip!插件似乎最受欢迎/最有用,这也是我目前正在使用的。
与此同时,当然,这里和其他地方有许多解决方案用于在两个不同的现有 div
之间切换,但没有一个涉及翻转。
但我需要的是这两件事都发生。我在 Flip 上发现的问题!是它包含作为函数调用一部分的内容,而我实际上想使用翻转在两个不同的现有 div
之间切换。我使用 iframe
看起来或多或少是正确的,但随后我使用了相当不必要的 iframe
并且我还必须等待该框架翻转后加载,看起来很糟糕。
翻转的 div 的两个“面”都太大且复杂,无法合理地插入到函数调用中,并且我不能使用像 $('div').text()
这样的东西,因为创建 div 的副本,而不是显示我已有的副本。
那么,有谁知道有什么库可以进行翻转,但允许您指定在翻转结束后使其可见的元素吗?或者有人用 Flip! 做过这种事情吗?也许是使用它的回调函数?
最佳答案
您可以尝试将两个 div 放在翻转框的顶部,使用 CSS 绝对位置,以便 div 的内容位于翻转框背景的顶部,看起来就像在框中一样。
例如,您有 div1 和 div2,默认情况下,当页面加载时,div1 正在显示,div2 的样式为 display:none,然后您在 Flip 中挂接回调,如下所示:
$("#flipbox").flip({
direction:'tb',
onBefore: function(){
$('#div1').hide();
},
onEnd: function(){
$('#div2').show();
}
});
div1 和 div2 的内容都位于翻转框的顶部,因此它们看起来像是包含在内的。
关于jQuery 在现有 div 之间翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11674540/