JQuery Animation + фоновое изображение подкачки

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 timers, чтобы анимация повторялась бесконечно.Спасибо всем за помощь.

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

    });

});