jquery - 如何在 div 内自动停止和滚动？

Question

我有一个 div，在里面我想一次显示 3 个文本。像 Windows 8 Metro 主题。我有三个这样的div：

<div id='a'> Text 1</div> <div id='b'> Text 2</div> <div id='c'> Text 3</div>

和另一个包含所有这些的主 div。我想在包装器内一次显示一个 div，而不会从下到上发生任何事件，并且新的 div 会滑过另一个。

PS：我已经看到如何使用图像和 css 来做到这一点。但是我想通过html而不是图像来显示文本，有没有办法使用jquery来做到这一点？谢谢你。

Answer 1

一个基本的例子：http: //jsfiddle.net/rNcNA/

HTML：

<div id="container">
    <div class="content">Some content here</div>
    <div class="content hidden">Other content here</div>
    <div class="content hidden">Yet more content here</div>
</div>​

JavaScript：

$(document).ready(function() {
    var interval = 2000; // 2 seconds
    var contents = $('#container').find('.content');
    var index = 0;
    var display = function(index) {
        $('.content:visible').fadeOut('fast', function() { $(contents[index]).fadeIn(); });
        index += 1;
        if (index > contents.length-1) {
            index = 0;
        }
        setTimeout(function() { display(index) }, interval);
    }

    display(index);
});​