javascript - 网站没有在正确的时间向下滚动或显示#proceed Div

Question

这是 JSFiddle:http://jsfiddle.net/dAQrE/

在 javascript 部分的顶部，您将看到假定在动画之后向下滚动到 #proceed div 的代码:

line 1, line 2, line 3, line 4..

继续页面应该滚动到的 div:

<div id="proceed">
    <div id="if_one">   <a href="http://websitelinkhere.com/1" class="button_primary agree">If Question 1 = Answer 1</a>
    </div>
    <div id="if_two">   <a href="http://websitelinkhere.com/2" class="button_primary agree">If Question 1 = Answer 2</a>
    </div>
    <div id="if_three"> <a href="http://websitelinkhere.com/3" class="button_primary agree">If Question 1 = Answer 3</a>
    </div>
</div>

假设在动画之后滚动到 #proceed div 的 javascript:

// assign the correct target
var target = $('#proceed');

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function () {
    target.css({
        'border-color': 'red'
    })
});

但是现在它在动画结束之前显示#proceed div 中的内容并且根本不向下滚动。我该如何解决这个问题？

Answer 1

这些函数将在您编写它们时调用 document.ready。它们需要封装在一个函数中，该函数在“第 1 行，第 2 行...”显示后调用。

我已经 fork 了你的 fiddle 来做到这一点。检查我包装在名为 proceed() 的函数中的事件，以及我对 verifyAnimation() 所做的更改以在最后一个“line x”之后调用该函数显示。

http://jsfiddle.net/ercFw/