Aim¿Cómo desplazar continuamente contenido dentro de un DIV usando jQuery?
El objetivo es un tener un contenedor DIV con una altura fija y anchura y tienen el contenido HTML dentro de ese div desplazarse automáticamente verticalmente de forma continua.
Pregunta Básicamente hemos creado el código de abajo usando jQuery para desplazarse (mover) el niño DIV verticalmente hacia arriba hasta que su padre fuera del cuadro delimitador, donde la animación se completa a continuación, lo que desencadena un controlador de eventos que restablece la posición de el niño DIV y comienza el proceso de nuevo.
Esto funciona bien, por lo que el contenido se desplaza dejando un espacio en blanco y luego comienza desde abajo nuevamente y se desplaza hacia arriba.
El problema que tengo es que los requisitos para esto es que el contenido aparezca como si se repitiera continuamente, ver el diagrama a continuación para explicar mejor esto, ¿hay alguna manera de hacerlo? (No quiero usar plug-ins 3er partido o bibliotecas distintas de jQuery):
alt text http://www.cameroncooke.com/playground/scrolling-example.gif
Lo que tengo hasta ahora
El HTML:
<div id="scrollingContainer">
<div class="scroller">
<h1>This is a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>
<p>More content....</p>
</div>
</div>
El CSS:
#scrollingContainer{
height: 300px;
width: 300px;
overflow: hidden;
}
#scrollingContainer DIV.scroller{
position: relative;
}
El JavaScript:
/**
* Scrolls the content DIV
*/
function scroll() {
if($('DIV.scroller').height() > $('#scrollingContainer').height()) {
var t = $('DIV.scroller').position().top + $('DIV.scroller').height();
/* Animate */
$('DIV.scroller').animate(
{
top: '-=' + t + 'px'
}
, 4000, 'linear', animationComplete);
}
}
function animationComplete() {
$(this).css('top', $('#scrollingContainer').height());
scroll();
}