网站未在正确的时间向下滚动到或显示#proceed Div

Question

Here is the JSFiddle: http://jsfiddle.net/dAQrE/

At the top of the javascript section you will see code that is suppose to scroll down to the #proceed div after the animation when it says:

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

proceed div that the page is suppose to scroll to:

<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>

The javascript that is suppose to scroll to the #proceed div after the animation:

// 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'
    })
});

But right now its displaying the content within the #proceed div before the animation finishes and it doesn't scroll down at all.. How do I fix this?

Answer 1

Those functions will get called on document.ready as you have them written. They need to be encapsulated within a function that gets called after "line 1, line 2..." gets displayed.

I have forked your fiddle to do this. Check out your events which I wrapped in a function called proceed() , and the changes I made to verifyAnimation() to call that function after the last "line x" is displayed.

http://jsfiddle.net/ercFw/