jQuery 动画 + 背景图片交换

Question

我试图用 jQuery 超越我的能力，但遇到了一个让我难住的问题。

基本上，我试图让一辆卡车从屏幕的左侧到右侧进行动画处理，然后当它到达屏幕的右侧时，卡车的背景图像会交换为卡车的图像面向另一个方向，然后它会以动画方式返回到屏幕上，并且将永远重复。

我可以让卡车在屏幕上移动，并交换背景图像，但无法让一切以某种逻辑顺序发生 - 即卡车背景图像在页面加载时交换，而不是在从左到右完成时交换。

这是到目前为止的代码，我意识到语法可能是错误的，但希望您会看到我正在尝试做的事情:

$(document).ready(function() {

    $(".animationWrap").animate({ left: "845px" }, { duration: 9000, queue: true }){
    $(".animationWrap").css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0');
}

});

Answer 1

在第一个 .animate 上使用回调函数，该函数在完成后触发，以按顺序执行操作(请参阅 jQuery Animate 的语法):

$(document).ready(function() {

    $(".animationWrap").animate({ left: "845px" }, 9000, function() {
        css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0');
        animate({ left: 0 }, 9000);
    });
});