Fade in & out text loop - jQuery

Ho due virgolette avvolte in tag H2 che voglio sfumare dentro e fuori usando jQuery. Quando la pagina viene caricata, desidero che la prima citazione entri in dissolvenza, si ritarda per alcuni secondi e si dissolve in modo che la citazione successiva faccia lo stesso. Mi piacerebbe che continuasse a scorrere le due citazioni. Qualsiasi aiuto sarebbe molto apprezzato.Fade in & out text loop - jQuery

fonte

2012-08-22 Tyler Almond

Si potrebbe fare così:

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

})();

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

Questo codice funzionerà per qualsiasi numero di preventivi, non solo per due. Se hai dei contenuti dopo le virgolette, probabilmente vorrai correggere la dimensione del contenitore in cui sono racchiuse le virgolette, in modo che non cambi le dimensioni man mano che vai da una quotazione alla successiva (facendo saltare l'altro contenuto della pagina) .

fonte

2012-08-22 01:45:43 jfriend00

la mia pagina venga caricata vuota quando aggiungo la sceneggiatura. Ho un sacco di altri articoli sulla pagina che non si stanno caricando. –

@TylerAlmond - Come posso aiutarti con quella domanda quando non riesco a vedere cosa hai fatto? Ovviamente, hai una sorta di script o errore HTML. Pubblica un link a ciò che hai fatto o guarda nella console degli errori per vedere quali errori hai in modo da poterli correggere. Il concetto funziona quando eseguito correttamente. Cordiali saluti, lo script sopra va all'interno dei tag '

Questo è ciò che è necessario per far funzionare lo script precedente. Prima di tutto bisogna fare riferimento al apropriate JQuery quadro, in modo da aggiungere questo script tag sia nella sezione <head>, o alla fine del tag <body>, dopo tutti gli altri elementi:

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

Poi il principale JavaScript deve andare essere caricato dopo il suddetto <script> tag:

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

fonte

2013-10-30 09:10:09 Kudzai

Problemi correlati

Fade in & out text loop - jQuery

risposta

Problemi correlati