Question

我正在研究可能需要在html / css或某些jQuery等中使用一些动画的东西。问题的实质在于将一个div与另一个div（两者都位于网站上的同一区域）不断地交替...可能以十秒为间隔。这个小提琴：

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。我的主要问题是它的动画/转换部分。也许使用小提琴的元素和布局，如何让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才能看到它的运行情况，但适用于所有其他浏览器）。你已经引用了引用的参考来告诉你如何旋转东西。

您只需将旋转与连续动画组合起来即可获得所需内容。

jQuery / Javascript / HTML使用动画将div转换为另一个

1 个答案: