jQuery fadeIn fadeOut hace desplazamiento de página

Tengo un sitio web habilitado para WordPress donde quiero crear un bloque destacado. Este bloque destacado mostrará artículos que se difuminan uno tras otro. Lo obtuve funcionando usando las API fadeIn y fadeOut de jQuery, pero hay un problema con la implementación.jQuery fadeIn fadeOut hace desplazamiento de página

Aquí está el código que tengo -

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

El fadeIn - efecto fadeOut está trabajando muy bien hasta que el usuario se desplaza a la parte inferior de la página. Cuando el usuario está en la parte inferior de la página, toda la página se desplaza hacia arriba cuando ocurre el cambio de fundido.

Esto se puede ver en acción en http://www.ronakg.com

Por favor, consejos sobre cómo puedo evitar el desplazamiento página.

EDIT: Así es como el código HTML se parece -

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

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

...

Fuente

2011-09-28 ronakg

No creo que el problema es que, por nada, nada sugiere que, para probar el punto, comente la línea 'jQuery (document) .ready (featured_block);' para que se vea así '' jQuery (document). ready (featured_block); 'luego desplácese hacia abajo, si la página salta, su problema no es la causa de la entrada/salida de fade en otro lugar, de lo contrario, podría intentar usar return false en el bloque presentado y/o callback – Val

Trate de darle el elemento que contiene uno de los bloques que aparecen y Fadeout un height: atributo estático con CSS.

Envuelva <div id="featured"> bloque con otro div.

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

Fuente

2011-09-28 15:13:27

Lo que ocurre en ese caso es que los bloques mostrados se desvanecen en diferentes lugares y no están en su lugar. Estoy usando 'style =" display: none "' para ocultar los otros bloques cuando el sitio se carga por primera vez. – ronakg

Ah. Por supuesto, los bloques tendrían que establecerse en 'position: absolute;' para que todos se desvanezcan dentro y fuera del mismo lugar. –

'posición: absoluta' hizo el truco. Sin embargo, tuve que ajustar otros elementos en consecuencia ya que la estructura existente era de naturaleza relativa. – ronakg

Si está utilizando <a> con Iqual href a "#", sólo hay que poner return false; al final de tu función featured_block que debería resolver el problema.

Fuente

2015-09-18 05:06:41 lwdias

jQuery fadeIn fadeOut hace desplazamiento de página

Respuesta

Cuestiones relacionadas