如何使用jQuery动画容器中的元素？

Question

I'm working on an article carousel using jQuery to try and get a better hold on the framework. I've got a containing div and in this div I have multiple articles.

<div id="container">
    <article>
        <h3>Article Heading</h3>
        <p>Article Content</p>
    </article>
    <article>
    ...
</div>

The div is formatted to be a specific width and height and overflow is set to hidden

I'm trying to animate it so when the user clicks a button, it calls the function to scroll to either the 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 the scrollNext function is called, it will scroll to the paragraph of the next article, or will scroll out of order.

I'm wondering if this is an issue with a selector, or possibly my styling of the page, or what the proper way of doing this would be. See the full page here

Or try it out on jsfiddle

Answer 1

Your margins are messing you up. Why not try something like this?

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

Answer 2

You are using .offset() which gives you the offset compared to the body.

Since you are wanting to scroll inside the div#container you need to use .position()

http://api.jquery.com/position/

And using position() requires that the div #container be position: relative; in your css.

Once you have that in your jQuery you need to change your scrollTop animations to include the scrollTop() of the div#container added to the position() of the next article

like so:

$('#container').animate({
  scrollTop: $('#container').scrollTop() + $(pdiv).position().top
}, 750);

You can see it all working in your updated jsfiddle:

http://jsfiddle.net/9ryjy/1/