Question

在javascript部分的顶部，您会看到代码，假设在动画之后向下滚动到#proceed div，它会显示：

第1行，第2行，第3行，第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行......”显示后被调用。

我已经把你的小提琴分开了。查看我在一个名为proceed()的函数中包含的事件，以及我对verifyAnimation()所做的更改，以便在显示最后一行“x行”后调用该函数。

http://jsfiddle.net/ercFw/

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

1 个答案: