淡入&；输出文本循环-jQuery

我有两个引号包装在H2标记中，我想使用jQuery淡入淡出。当页面加载时，我希望第一个引用淡入，延迟几秒钟，然后淡出，然后下一个引用也这样做。我希望它继续循环两个引号。非常感谢您的帮助。

您可以这样做：

CSS:

HTML:

工作演示：

---

这段代码适用于任何数量的引号，而不仅仅是两个引号。如果在引号后有内容，您可能需要修正引号所在容器的大小，以便在从一个引号到下一个引号时，容器的大小不会发生变化（导致其他页面内容跳转）。

这是使上述脚本正常工作所需的。 首先，您需要引用适当的JQuery框架，因此在

部分或
标记的末尾，在所有其他元素之后添加此脚本标记：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">



然后必须在前面提到的
标记之后加载主JavaScript：

<script type="text/javascript">
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
</script>


（功能（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
fadeIn先生（2000年）
.延迟（2000年）
.fadeOut（2000年，showNextQuote）；
}
showNextQuote（）；
})();
添加脚本时，我的页面加载为空白。我在页面上还有一大堆其他项目没有加载。@TylerAlmond-当我看不到你做了什么时，我该如何帮助你解决这个问题？显然，您有某种脚本或HTML错误。发布一个指向您所做工作的链接，或者查看错误控制台中的错误，以便您可以修复它们。这个概念在正确执行时有效。仅供参考，上面的脚本位于页面
部分末尾的
标记中。对此表示抱歉。这里有一个指向我正在处理的页面的链接：@tyleramond-页面上的所有内容都是隐藏的，因为
real body
是
display:none
，因为javascript有错误。scripts.js中还有一个脚本错误。首先，删除scripts.js中的以下行：
@tyleramond-您的内容也没有任何
.quote
项，因此您添加的代码不会起任何作用。
// code gets installed at the end of the body (after all other HTML)
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();​

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<script type="text/javascript">
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
</script>