Jquery 调用。为同一元素设置两次动画

大家好，我正在制作jquery动画，其中div元素更改了它的大小和位置（这部分持续3秒），完成后，它将背景颜色更改为蓝色（5秒）。第一部分工作正常，但我不知道如何在颜色更改开始或调用之前处理设置中断。动画两次

如果要在第一个动画完成后更改背景色，可以在动画中使用完整回调

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({'marginLeft': "+=100px",
    'height': "100px",
    'width': "100px",
  }, 3000).animate({'backgrounColor': "blue"},5000);
  })
})

$('#div').animate({'marginLeft': "+=100px",
                       'height': "100px",
                       'width': "100px"}, 3000, function() {
                                                 $('#div').fadeIn('slow', function() {
                                                   $("#div").animate({'backgrounColor': "blue"},5000)
            });
        });