在两个div之间创建javascript动画

Question

我有一个容器，里面有两个主要的div。容器的可见区域是540px高，1024px（意味着容器外的任何东西都是“隐藏”的。）

我想在容器内的两个主要div之间创建一个自动滚动，所以它从第一个div可见，等待10秒，然后“滚动”到第二个div并停止，并且不会不要回到开始。

我想我必须使用javascript或Jquery，因为CSS3动画将无法执行此操作（因为我希望动画在页面加载后启动）。我已经绘制了一个我想要做的基本形象，但除此之外，我不知道我将从哪里开始。 HELP !!!

更新：我在这里发布了一个更新的js小提琴，使用了我非常有限的知识：

http://jsfiddle.net/D7Aad/16/

目前我在两张幻灯片之间有一个“淡入淡出”，这个想法是，不是褪色，页面会自动向下滚动到第二个div然后停止而不是重复。

我认为我的问题可能在于javascript代码：

var continuous = function() {
$("#slide_one").fadeToggle(600);
$("#slide_two").fadeToggle(600);   
}

setInterval(continuous,5000);

如果有任何细节可以帮助我解释我正在寻找的内容，请在评论中发布，我会回复你。

Answer 1

这是working fiddle

$(document).ready(function() {
    //Show both slides
    $('#slide_one, #slide_two').show();
    //Define a 2 seconds timeout before starting the animation
    setTimeout(function() {
        $('body').animate({
             //Scroll to #slide_two div
             scrollTop: $("#slide_two").offset().top
         }, 2000); // the scroll down animation will last 2 seconds
    }, 2000); // after 2 seconds, scroll down
});

来源：jQuery scroll to element