.animate обратного вызова в других нагрузках .animate 2 раза

Question

я хочу сделать это:

1. прокрутка в 440 от верхней
2. открытой #detail с анимацией
3. загрузить мой id.html внутри #detail
4. сделали анимация CSS в этом HTML-контенте

Я хочу сделать это шаг за шагом:

шаг 2/выполняется после шага 1/

шаг 3/выполняется после шага 2/

шаг 4/выполняется после шага 3/

Но у меня есть одна проблема: мой .load функция выполняется дважды. Я не понимаю, почему.

$('html,body').animate({scrollTop:(440)}, 1300,'easeInSine', function() { 
    $('#detail').animate({height: detail_height}, 800, function() { 
     $('#detail').load('pages/web/' + id + '.html', function() { 
      //do something 
    }); 
    }); 
}); 

Answer 1

При анимации n элементов, обратный вызов будет происходить n раз. это намеченное поведение.

Если вы хотите получить один обратный вызов для анимации нескольких элементов, используйте объект обещания.

$('html,body').animate({scrollTop:(440)}, 1300,'easeInSine').promise().done(function() { 
    $('#detail').animate({height: detail_height}, 800, function() { 
     $('#detail').load('pages/web/' + id + '.html', function() { 
      //do something 
     }); 
    }); 
}); 

Альтернатива заключается в том, чтобы выбрать только html или body, а не оба.