.animate回調2次

Question

我想這樣做：

1. 滾動到440從頂部
2. 開放#detail動畫
3. 加載我id.html內#detail
4. 做此HTML內容的CSS動畫

我想這樣做一步一步：

步驟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倍。這是預期的行爲。

如果您希望爲多個元素設置動畫效果，請使用promise對象。

$('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，而不是兩者。