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

or try out on jsfiddle

your margins messing up. why not try this?

var box = $("#container"), height = box.height(); currentposition++; box.animate({scrolltop: currentposition*height}); 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -