6

次のような特定の時間で実行されているアニメーションがあるとします。

$('span').animate({opacity : 1}, 10000);

アニメーションが非常に長いため、ユーザーはボタンをもう一度クリックしてみます。アニメーションはすでにアニメーションを通して一定の時間になりますが、それはおそらく毎回異なるでしょう。

2回目のクリックで、ユーザーがクリックしたときにオブジェクトの不透明度を維持したまま、アニメーションプロセスを更新して、終了までにかかる時間を変更することはできますか？

基本的に、アニメーションの途中でアニメーションプロセスを更新したいと思います。

4

4 に答える 4

6

stepのオプションを使用しanimateて、アニメーションの距離を追跡できます。次に、その情報を使用して、アニメーションの残り時間を計算できます。次に、現在のアニメーションを停止し、半分の長さで新しいアニメーションを開始します。

http://jsfiddle.net/MdD45/

編集

に渡された2番目のパラメータには、アニメーションの何パーセントかをstep示すという名前のプロパティが含まれているようです。posそれは物事をさらに単純化することができます。

http://jsfiddle.net/MdD45/1/

var startVal = 0;
var endVal = 1;
var duration = 10000;

var howfar = 0;

$('span').css("opacity",startVal)
    .animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });

$("button").click(function(){
    // calculate the new duration as half of the remaining duration
    var timeRemaining = duration - (howfar * duration);
    duration = timeRemaining / 2;

    $('span').stop().animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });
});
​
于 2012-09-14T20:09:05.713 に答える
2

昨日、jQueryアニメーションでスキップするために何かをまとめました。ここにコードがあります。これは、ユースケースに合わせて非常に簡単に変更できるはずです。

編集：変更されたバージョン：

デモ： http： //jsfiddle.net/SO_AMK/fJyKM/

jQuery：

var time = 10000;
var opacity = 1;
var currentTime = 0;

$("#square").animate({
    opacity: opacity
}, {
    duration: time,
    step: function(now, fx) {

        currentTime = Math.round((now * time) / opacity);

    },
    easing: "linear"
});


$("#hurry").click(function() {
    $("#square").stop().animate({
        opacity: opacity
    }, {
        duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
        step: function(now, fx) {

            currentTime = Math.round((now * time) / opacity);

        },
        easing: "linear"
    });
});​

また、 widthなどの他のプロパティでも機能します。唯一の落とし穴は、それが減少する値である場合、別のスクリプトを使用する必要があるということです。

于 2012-09-14T20:03:55.607 に答える
0

これが機能するかどうかは完全にはわかりませんが、次のようにすることを検討してください。

<div id="box"></div>
<style type="text/css">
div#box {
    -webkit-transition: width 10s;
    -moz-transition: width 10s;
    transition: width 10s;
    background: #000;
    width: 100px;
}
div#box.speedy {
    -webkit-transition: width 5s;
    -moz-transition: width 5s;
    transition: width 5s;
}
</style>
<script style="text/javascript">
    $(function() {
        $('div#box').css('width', '400');
        setTimeout(function() {
            $('div#box').addClass('box');
        }, 2000);
    });
</script>

基本的に、cssにアニメーション化させ、移行を高速化する別のクラスを追加します。

于 2012-09-14T20:18:23.927 に答える
0

はい、できます。

「stop（）」メソッドを使用してアニメーションを停止してから、同じプロパティの同じノードに対して、ターゲット値として元のアニメーションを開始する必要があります。

于 2012-09-14T19:56:37.957 に答える