Question

我正试图用jQuery打破我的重量，并遇到了一个让我难过的问题。

基本上，我试图让一辆卡车从屏幕左侧向右侧动画，然后当它到达屏幕右侧时，卡车的背景图像交换到卡车的图像面对另一种方式，它然后在屏幕上回放动画，并将永远重复。

我可以让卡车在屏幕上移动，并交换背景图像，但不能以某种逻辑顺序发生所有事情--I.E。卡车背景图像在页面加载时交换，而不是在从左到右完成时交换。

到目前为止，这是代码，我意识到语法可能是错误的，但希望你会看到我想要做的事情：

$(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);
    });
});

Answer 2

您需要使用回调 - 在动画完成时会触发回调。有时将其创建为命名函数有助于您重用它。

$(document).ready(function() {
     $('.animationWrap');.animate({ left: "845px" }, { duration: 9000, queue: true }, animationComplete ); 
});

function animationComplete(){
    $(this).css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0');
}

Answer 3

这就是我为了让它发挥作用所做的。我还使用了一个名为jQuery计时器的插件来让动画无限重复。感谢大家的帮助。

$(document).ready(function() {
        $(".animationWrap").everyTime(0, function() {

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

    });

}）;

jQuery动画+背景图片交换

3 个答案: