jQuery動畫+背景圖片交換

我想用jQuery突破自己的體重，並遇到一個讓我難倒的問題。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'); 
} 

});

來源

2009-12-07 WackCSS

使用一個回調函數第一.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); 
    }); 
});

來源

2009-12-07 15:44:42 carillonator

感謝您的幫助。我現在已經90％了，並且比我在一小時前做的更多地瞭解回調！ – WackCSS 2009-12-07 16:59:46

您需要使用回調 - 動畫完成後，將被解僱。有時候將它作爲一個命名函數來創建，這樣可以重用它。

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

來源

2009-12-07 15:45:03 redsquare

感謝您的幫助。我現在已經90％了，並且比我在一小時前做的更多地瞭解回調！ – WackCSS 2009-12-07 18:01:00

這就是我所做的工作。我還使用了一個名爲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'); 
     });  

    });

}）;

來源

2009-12-08 12:22:36 WackCSS

jQuery動畫+背景圖片交換

回答

相關問題