Fade in & out text loop - jQuery

У меня есть две кавычки, завернутые в теги H2, которые я хочу затухать и использовать с помощью jQuery. Когда страница загружается, я хочу, чтобы первая цитата исчезла, задержка на несколько секунд и исчезновение, затем следующая цитата, чтобы сделать то же самое. Я бы хотел, чтобы он продолжал цитировать два кавычки. Любая помощь будет принята с благодарностью.

Ответ 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/

Этот код будет работать для любого количества котировок, которые у вас есть, а не только для двух. Если у вас есть контент после кавычек, вы, скорее всего, захотите установить размер контейнера, в котором находятся кавычки, чтобы он не менял размер по мере перехода от одной цитаты к следующей (заставляя другое содержимое страницы перемещаться).

Ответ 2

Это то, что вам нужно для работы выше script. Сначала вам нужно сослаться на подходящую JQuery Framework, поэтому добавьте этот тег script либо в раздел <head>, либо в конце тега <body> после всех остальных элементов:

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

Затем основной JavaScript ДОЛЖЕН быть загружен после вышеупомянутого тега <script>:

<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>