jQuery Animation + échange d'images d'arrière-plan

Question

J'essaie de dépasser mon poids avec jQuery, et j'ai rencontré un problème qui m'a bloqué. Essentiellement, j'essaie de faire en sorte qu'un camion puisse animer du côté gauche de l'écran vers la droite, puis quand il arrive à la droite de l'écran, l'image de fond du camion s'harmonise à une image du Camion face à l'autre, puis il s'anime à travers l'écran, et répète pour toujours.

Je peux faire en sorte que le camion se déplace sur l'écran et permute l'image d'arrière-plan, mais je n'arrive pas à faire en sorte que tout se passe dans un ordre logique - I.E. l'image d'arrière-plan du camion est permutée lors du chargement de la page et non lorsque la gauche vers la droite est terminée.

Voici le code à ce jour, et je me rends compte que la syntaxe est probablement faux, mais nous espérons que vous verrez ce que je suis en train de faire:

$(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

utiliser une fonction de rappel sur la première .animate, qui feux après est terminée, de faire les choses dans l'ordre (voir la syntaxe pour 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

Vous devez utiliser la fonction de rappel - qui se déclenché lorsque l'animation est terminée. Parfois, il est utile de créer cette fonction en tant que fonction nommée afin de pouvoir la réutiliser.

$(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

Voici ce que j'ai fait pour que cela fonctionne. J'ai également utilisé un plugin appelé jQuery timers pour que l'animation se répète indéfiniment. Merci pour votre aide tout le monde.

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

    }); 

});