渐入渐出文本循环-jQuery [英] Fade in & out text loop - jQuery

问题描述

我有两个用H2标签包裹的引号，我想使用jQuery淡入和淡出.当页面加载时，我希望第一个引用淡入，延迟几秒钟然后淡出，然后下一个引用也做同样的事情.我希望它继续遍历两个引号.任何帮助将不胜感激.

I have two quotes wrapped in H2 tags that I want to fade in and out using jQuery. When the page loads I want the first quote to fade in, delay for a few seconds and fade out then the next quote to do the same. I would like it to continue to loop through the two quotes. Any help would be greatly appreciated.

推荐答案

您可以这样做:

CSS:

.quotes {display: none;}​

HTML:

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

JavaScript:

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/

此代码将适用于您拥有的任何数量的报价，而不仅仅是两个.如果引号后面有内容，则可能需要固定引号所在的容器的大小，以使它在从一个引号移到下一个引号时不会改变大小(导致其他页面的内容跳来跳去)

This code will work for any number of quotes you have, not just two. If you have content after the quotes, you will likely want to fix the size of the container the quotes are in so that it doesn't change size as you go from one quote to the next (causing the other page contents to jump around).

这篇关于渐入渐出文本循环-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！