1

Jqueryを使用して、Webページの上部にある車をアニメーション化しています。このコードを使用して、左から右に移動します。

/* 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のボックスから外れているので、到達する直前にフェードアウトさせたいと思います。また、もう少し速く動かしてほしいです。

ありがとう！

デモ：

4

1 に答える 1

0

アニメーショントリガーをチェーンして、その間に遅延を設けることを検討してください。

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-17T01:51:14.703 に答える