jQuery 在 html 中模拟翻转动态磁贴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11782237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulating flipping live tiles in html
提问by Voidsbane
I need to code some html square "live tiles" that flip between 4 states periodically. Basically what I need is what this plug-in does http://www.drewgreenwell.com/projects/metrojs, but between 4 states, not just 2. Is there a definitive API/plug-in that allows live tile management in html/jquery sites? I'm not building a Windows 8 app, I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers. Thanks.
我需要编写一些定期在 4 个状态之间翻转的 html 方形“动态图块”。基本上我需要的是这个插件的作用http://www.drewgreenwell.com/projects/metrojs，但在 4 个状态之间，而不仅仅是 2 个。是否有一个明确的 API/插件允许在 html 中进行实时磁贴管理/jquery 网站？我不是在构建 Windows 8 应用程序，我只是在尝试模拟 Html 中的 Live Tiles 翻转，并希望它能在所有主要浏览器中运行。谢谢。
回答by Voidsbane
回答by kei
I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers
我只是想模拟 Html 中的 Live Tiles 翻转，希望它能在所有主要浏览器中运行
I think this is what you need. Flip! http://lab.smashup.it/flip/
我认为这就是你所需要的。翻动！http://lab.smashup.it/flip/
回答by Jeff Mahoney
You might consider reading this article (below) on how to do flips with CSS3/HTML5 transitions. It's not Javascript (and thus doesn't have an API), but in my experience transition effects seem to be a little more reliable in their smoothness.
您可能会考虑阅读这篇关于如何使用 CSS3/HTML5 转换进行翻转的文章（如下）。它不是 Javascript（因此没有 API），但根据我的经验，过渡效果的平滑度似乎更可靠一些。
回答by Dominic Hopton
This should be pretty easy. Specifically:
这应该很容易。具体来说：
- Create a DIV with your N tile-sized contents
- Clip it/size the parent div to 1 tile size
- Make sure that overflow is hidden.
- Apply translate's to the previous content & new content using CSS
- 用你的 N 个平铺大小的内容创建一个 DIV
- 将其剪辑/将父 div 调整为 1 个平铺大小
- 确保溢出被隐藏。
- 使用 CSS 将翻译应用到以前的内容和新内容
Then everything should be fine.
那么一切都应该没问题。
回答by Disco Banana
You can use jQuery or jQuery UI to get this effect. jQuery has .animate(), .show(), .hide()and other methods that can help.
您可以使用 jQuery 或 jQuery UI 来获得这种效果。jQuery有.animate()，.show()，.hide()等方法，可以帮助。
