jQuery fadeIn fadeOut consente di scorrere le pagine

Ho un sito Web con wordpress che consente di creare un blocco in primo piano. Questo blocco in primo piano presenterà articoli che si sbiadiscono uno dopo l'altro. Ho funzionato usando le API fadeIn e fadeOut di jQuery, ma c'è un problema con l'implementazione.jQuery fadeIn fadeOut consente di scorrere le pagine

Ecco il codice che ho -

var count=0; 
var sticky_count=<?php echo count($sticky);?>; 

jQuery(document).ready(featured_block); 

function featured_block() { 
    jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback); 
} 

function callback() { 
    count++; 
    jQuery(".featured" + count % sticky_count).fadeIn().delay(5000); 
    jQuery(".featured" + count % sticky_count).fadeOut(callback); 
}

Il fadeIn - effetto fadeOut sta lavorando bene finché l'utente si sposta alla parte inferiore della pagina. Quando l'utente si trova nella parte inferiore della pagina, l'intera pagina scorre verso l'alto quando si verifica l'opzione di dissolvenza.

si può vedere questo in azione a http://www.ronakg.com

Si prega di consulenza come posso evitare la pagina di scorrimento.

EDIT: Ecco come il codice HTML assomiglia -

<div class="featured0"> 
    ... 
</div> 

<div class="featured1" style="display:none"> 
    ... 
</div> 

...

fonte

2011-09-28 ronakg

Non penso che il problema sia che, coz, niente suggerisce che, per dimostrare il punto, commenta la riga 'jQuery (document) .ready (featured_block);' così sembra questo '// jQuery (document) .ready (featured_block); 'quindi scorri in basso, se la pagina salta in alto, il tuo problema non è coz di fade in/out il suo altrimenti dove, altrimenti, potresti provare a usare return false sul blocco in primo piano e/o callback – Val

Provare a dare l'elemento che contiene dei blocchi che sfumano in dissolvenza e una statica height: attributo con i CSS.

Wrap <div id="featured"> bloccare con un altro div.

<div id="rotator" style="height: 340px;"> 
    <div id="featured"> 
    ... 
    </div> 
</div>

fonte

2011-09-28 15:13:27

Ciò che accade in questo caso è, i blocchi in primo piano dissolvenza in dissolvenza in luoghi diversi e non sul posto. Sto usando 'style =" display: none "' per nascondere gli altri blocchi quando il sito viene caricato per la prima volta. – ronakg

Ah. Ovviamente, i blocchi devono essere impostati su "position: absolute", in modo che tutti si dissolvino nello stesso punto. –

'position: absolute' ha funzionato. Tuttavia, ho dovuto adeguare di conseguenza altri elementi in quanto la struttura esistente era relativa in natura. – ronakg

Se si utilizza <a> con iqual href di "#", basta mettere return false; alla fine della funzione featured_block che dovrebbe risolvere il problema.

fonte

2015-09-18 05:06:41 lwdias

jQuery fadeIn fadeOut consente di scorrere le pagine

risposta

Problemi correlati