jquery - 淡入和淡出文本循环 - jQuery

Question

我有两个引号包含在 H2 标签中，我想使用 jQuery 淡入和淡出它们。当页面加载时，我希望第一个引用淡入，延迟几秒钟并淡出，然后下一个引用执行相同的操作。我希望它继续循环这两个引号。任何帮助将不胜感激。

Answer 1

你可以这样做:

CSS:

.quotes {display: none;}​

HTML:

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>​

Javascript:

// 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();

})();​

工作演示:http://jsfiddle.net/jfriend00/n4mKw/

此代码适用于您拥有的任意数量的报价，而不仅仅是两个。如果引号后面有内容，您可能需要修复引号所在容器的大小，这样当您从一个引号转到下一个引号时，它的大小就不会改变(导致其他页面内容跳转) .