jquery - jquery 动画回调

Question

我想在这个动画函数上添加一个回调——

$("a#goto-3").click(function() {
    $('html, body').animate({
       scrollTop: $("#landpoint-3").offset().top}, 1000, 'easeInOutCubic'
    );
    return false; 
});

我可以用这个在scrollTop上做到这一点......

$("a#goto-2").click(function() {
    $('html, body').animate({
       scrollTop: $("#landpoint-2").offset().top}, 1000, 'easeInOutCubic', function() {
         document.write('complete');  
       });
    return false; 
});

..但是没有运气让它进入动画功能 - 我知道这个应该非常简单..提前谢谢..

Answer 1

$("a#goto-3").click(function() {
    $('html, body').animate({
       scrollTop: $("#landpoint-3").offset().top}, 1000, 'easeInOutCubic', function() { callback stuff here; }
    );
    return false; 
});

确保只为 ONE 元素设置动画，同时在 html 和 body 上设置动画。

见这个例子：http: //jsfiddle.net/HQUaD/2/

Answer 2

$('html, body').animate({
   scrollTop: $("#landpoint-3").offset().top}, 1000, 'easeInOutCubic', function() {
       // animation completed code
   }
);

在此处查看文档

或者你可以像这样使用.when()：

$.when($('html, body').animate({
   scrollTop: $("#landpoint-3").offset().top}, 1000, 'easeInOutCubic'))
.then(function() {
    // both animations completed code!
});