如何加快動畫汽車的速度並使其淡出？

我正在使用Jquery在網頁頂部爲汽車製作動畫。我使用這段代碼使它從左到右移動。如何加快動畫汽車的速度並使其淡出？

/* Car */ 
function animateCar($car, endPos, duration) { 
    $car.animate({ 
     left: endPos + "px", 
    }, { duration: duration, easing: 'linear', queue: false }); 
    setTimeout(function() { 
     $car.animate({ 
      opacity: 0 
     }, { duration: 6000, easing: 'linear', queue: false }); 
    }, 74000); 
} 
animateCar($(".car"), 1200, 80000);

目前，它驅動我的1000px的盒子，我希望它在它到達它之前淡出。我也希望它移動得更快一點。

謝謝！

Demo：

來源

2013-01-17 Jack McLaughlin

使其更快地將持續時間從80000改變到更快 –

如果解釋*如何*它不起作用（例如「汽車永不褪色」）並詢問*爲什麼*，那麼您會得到更好的答覆，要執行的任務。 – 2013-01-17 01:49:19

css3過渡是天堂的方式！（它使你的動畫「向後兼容」） – 2013-01-17 02:11:03

你可能會考慮鏈接您的動畫與之間的延遲一起觸發。

function animateCar($car, endPos, duration) { 
    var opacityDuration = parseInt(duration * .75); 
    $car.animate({ 
     left: endPos + "px", 
    }, { duration: duration, easing: 'linear', queue: false }) 
    .delay(duration - opacityDuration) 
    .animate({ 
     opacity: 0 
    }, { duration: opacityDuration, easing: 'linear', queue: false }); 
}

在這裏，我開始通過整體動畫的方式淡入淡出3/4。你當然可以根據需要改變它。如果你想加速整個動畫，只需短時間傳球。

來源

2013-01-17 01:51:14

謝謝你，你提供的代碼工作，但我設法修復原來的。 –

如何加快動畫汽車的速度並使其淡出？

回答

相關問題