Question

我正在研究使用jQuery的文章轮播，试图更好地掌握框架。我有一个包含div，在这个div中我有多篇文章。

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

div被格式化为特定的宽度和高度，溢出被设置为隐藏

我正在尝试设置动画，以便当用户点击按钮时，它会调用该功能滚动到下一篇或上一篇文章

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

但是，当调用scrollNext函数时，它将滚动到下一篇文章的段落，或者将无序滚动。

我想知道这是选择器的问题，还是我的页面样式，或者这样做的正确方法。 See the full page here

Or try it out on jsfiddle

Answer 1

你的利润让你烦恼。为什么不尝试这样的事情？

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

Answer 2

您正在使用.offset()，它会为您提供与身体相比的偏移量。

由于您要在div#container内滚动，因此需要使用.position()

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

使用position()要求您的css中的div #container为position: relative;。

在您的jQuery中拥有该功能后，您需要更改scrollTop动画，以包含scrollTop() div#container添加到下一篇文章的position()

像这样：

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

你可以在更新的jsfiddle中看到它全部工作：

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

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

2 个答案: