javascript - How to animate through elements in a container using jQuery? -
i'm working on article carousel using jquery try , better hold on framework. i've got containing div , in div have multiple articles.
<div id="container"> <article> <h3>article heading</h3> <p>article content</p> </article> <article> ... </div>
the div formatted specific width , height , overflow set hidden
i'm trying animate when user clicks button, calls function scroll either next or previous article
var articles = -1; var currentposition = -1; window.onload = function(){ articles = $("#container>article"); currentposition = 0; } function scrollnext(){ $('#container').animate({ scrolltop: $(articles[currentposition+1]).offset().top }, 750); currentposition++; }
however, when scrollnext function called, scroll paragraph of next article, or scroll out of order.
i'm wondering if issue selector, or possibly styling of page, or proper way of doing be. see full page here
your margins messing up. why not try this?
var box = $("#container"), height = box.height(); currentposition++; box.animate({scrolltop: currentposition*height});
Comments
Post a Comment