Fading i in z Click - jquery, fade

Chciałbym, żeby cytaty zaczęły się zacierać / znikaći przejdź do następnego po prostu klikając na ekranie. Tak jak jest teraz, pierwszy cytat zaczyna się zanim przejdę do tej strony i jest to nieco mylące. To jest przewijana strona.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function() {

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

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

showNextQuote();

})();
</script>

Odpowiedzi:

Jeśli chcesz czekać na kliknięcie, nie uruchamiaj automatycznie showNextQuote() w ostatniej linii. Dodaj go do zdarzenia kliknięcia:

$(document).on("click", showNextQuote );

Aby wyświetlić pierwszy automatycznie:

++quoteIndex;
quotes.eq(quoteIndex).fadeIn(2500);

Następnie będzie wymagane kliknięcie, aby rozpocząć następne.

Spróbuj podstawiania $(document).ready(fn) Alias $(function() {}) dla IIFE (function() {})() ; .fadeTo() dla .fadeIn() i .fadeOut() ; przypisywanie click wydarzenie $(window) z showNextQuote ustaw jako program obsługi dla click zdarzenie

$(function() {

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

function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeTo(2500, 1)
.delay(2200)
.fadeTo(4500, 0);
}

$(window).on("click", showNextQuote);

});

body {
width:400px;
height:300px;
}

.quotes {
opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
click
<div class="quotes">a</div>
<div class="quotes">b</div>
<div class="quotes">c</div>
<div class="quotes">d</div>