Jquery Animate在First Time早期执行Complete Callback，随后正常执行

Question

我正在尝试一个简单的css3转换。我使用延迟对象来测序动画。但是，有一个小故障。这段特殊的代码在第一次执行时会比预期更早地返回对象。它在下次执行时按预期运行。

基本上，在第一次执行期间，我会在动画完成之前观察到“旋转完成”消息。在第二个和第三个动画期间，动画完成后将记录消息。

我哪里错了？请帮忙。

function xRotate() {

    var dfd = new $.Deferred();

    loadAllImages().promise().done(function (message) {
        console.log(message);
        $(".mp-slider").find('.card').stop(true, true).animate({  wordSpacing: 180 }, {
            queue: false,
            duration: 500,
            easing: "swing",
            step: function (now) {
                $(this).css('-webkit-transform', ' rotate3d(1,0,0,' + now + 'deg)');
                $(this).css('-moz-transform', ' rotate3d(1,0,0,' + now + 'deg)');
            }
        }).promise().done(function () {
            dfd.resolve("Rotating Done");
        });

    });
    return dfd.promise();
}