Przejście i wygaszenie pętli tekstowej - jQuery

Mam dwie cytaty zapakowane w tagi H2, które chcę zanikać i pomijać za pomocą jQuery. Kiedy ładuje się strona, chcę, aby pierwszy cytat pojawiał się, opóźnij o kilka sekund i zaniknij, a następnie wykonaj następny cytat, aby zrobić to samo. Chciałbym, aby kontynuował przeglądanie dwóch cytatów. Każda pomoc będzie wielce ceniona.Przejście i wygaszenie pętli tekstowej - jQuery

Źródło

2012-08-22 Tyler Almond

Można to zrobić tak:

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

})();

Praca demo: http://jsfiddle.net/jfriend00/n4mKw/

Ten kod będzie działał dla dowolnej liczby cytatów, a nie tylko dla dwóch. Jeśli masz treść po cudzysłowach, prawdopodobnie zechcesz naprawić rozmiar kontenera, w którym znajdują się cytaty, aby nie zmieniał rozmiaru z jednego cytatu do drugiego (powodując przeskok zawartości innej strony) .

Źródło

2012-08-22 01:45:43 jfriend00

Moja strona ładuje się pusta po dodaniu skryptu. Mam kilka innych elementów na stronie, które nie ładują się. –

@TylerAlmond - Jak mam ci pomóc, gdy nie widzę, co zrobiłeś? Oczywiście masz jakiś skrypt lub błąd HTML. Napisz link do tego, co zrobiłeś, lub zajrzyj do konsoli błędów, aby zobaczyć, jakie błędy masz, aby je naprawić. Koncepcja działa prawidłowo po wykonaniu. FYI, powyższy skrypt znajduje się wewnątrz '

Oto, czego potrzebujesz, aby powyższy skrypt działał. Najpierw trzeba odwołać odniesieniu do odpowiednich jQuery framework, więc dodać to skrypt tag albo w części <head>, lub na końcu znacznika <body>, po wszystkich innych elementów:

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

wówczas głównym JavaScript MUSI zostać załadowany po wspomnianym znaczniku <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>

Źródło

2013-10-30 09:10:09 Kudzai

Powiązane problemy

Przejście i wygaszenie pętli tekstowej - jQuery

Odpowiedz

Powiązane problemy