javascript - jQuery/Javascript/HTML 将 div 转换为另一个动画

Question

我正在研究一些可能需要 html/css 或一些 jQuery 等动画的东西。问题的本质在于不断地交替一个div与另一个div(两者都位于网站上的同一区域)......也许以十秒的间隔。这个 fiddle 在这里:

http://jsfiddle.net/arunpjohny/asTBL/

html 在这里:

<div id="quote1">
<span class="quote">I am a quote</span>
<span class="author">Author Name</span>
</div>

<div id="quote2">I am another quote</div>

<div id="quote3">I am yet another quote</div>

JavaScript 在这里:

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 2500)

})

基本上覆盖了每 x 秒的交替 div。我遇到的主要问题是它的动画/转换部分。也许使用 fiddle 的元素和布局，如何使 div 在旋转门风格的动画中交替。第一个 div 实质上旋转到页面中，而旋转门的另一侧是新页面？它每 10 秒左右执行一次？我研究过，也许 html2canvas 是可行的方法，但我不确定我能否掌握该内容。有什么帮助吗？

更新:

我是编码的极端新手。我发现了这个很棒的网站

http://davidwalsh.name/css-flip

它具有我正在寻找的翻转效果。有没有办法将其与 jQuery 结合使用，使这种效果每十秒在某些 div 上发生一次？而不是每次将鼠标移到其上方时都会出现效果？

Answer 1

整个事情只需使用 CSS 动画和 3D 变换即可完成，它们为您提供了绕轴旋转物体的功能，并以规则的频率连续执行此操作。

对于其中的连续动画部分，请参阅文章http://css-tricks.com/almanac/properties/t/transition/ 。有关可以实现的演示，请参阅我在我自己的网站之一上放置的一个小型连续旋转显示器:http://www.dataprotectioncourse.co.uk/ (它需要最新版本的 IE 才能看到它的运行情况，但在所有其他浏览器上都可以正常工作)。并且您已经引用了引用的引用资料来告诉您如何旋转事物。

您只需将旋转与连续动画结合起来即可获得您想要的效果。