2

このスライド効果を作成しようとしていますが、私が抱えている唯一の問題はキューイングです。

$(this).animate({'left' : '0%'}, randTime, function() {
    $(this).animate({'boxShadow' : 'none'});
    setTimeout(function() {
        $container.children('.slice').addClass('noshadow');
        $('body > div:not(#'+container+') .slice').each(function() {
            restartAnimation($(this));
        });             
    $container.children('.content').fadeIn();   
    }, (aLength+100));
});

上記のコンテナ変数は現在のコンテナです。：not（container）を実行したので、現在のコンテナーはアニメーションを続行します。これはすべて、コンテナ要素のIDとアニメーションの実行方法（キーワードだけがifステートメントを実行する）の2つの属性を持つ関数に含まれています。次に、次のようなアニメーションをアクティブにするメニューがあります。

if($(this).attr('name') == 'home') {

    animation('home', 'top');

}
else if { .....

アニメーションの再起動機能は、他のすべてのアニメーション要素を元の位置に再起動するだけなので、再度実行できます。ここで問題となるのは、再起動機能が実行されるまで遅延があるため、遅延時間内に2つのメニュー項目をクリックすると、再起動機能が実行され、すべてが非常に混乱することになります。

アニメーションを元の位置に戻す方法が必要です。これにより、アニメーションを再び実行できるようになりますが、他のアニメーション要素に干渉して再起動することはありません。そうでなければ、私たちは大きな混乱に終わります。効果を試すことができるように、簡単なjsFiddleを設定しました。現時点ではコードが少し乱雑で、終了したらすべてを整理することを計画していましたが、このキューイングの問題により、本当に行き詰まりました。http://jsfiddle.net/qe7dj/

4

1 に答える 1

2

これに対処する1つの方法は、最初のアニメーションが終了するまで別のアニメーションを開始できないようにすることです。

これを行うにはおそらくいくつかの方法がありますが、頭に浮かぶのはグローバル関数キューオブジェクトを作成することです（以下に説明とコードを示します）。

現在アニメーション化されているスライドの数を追跡するには、グローバル変数が必要です。

var animationsRunning = 0;

スライドアニメーションが開始するたびに、上記の変数をインクリメントします。スライドアニメーションが終了したら、デクリメントします。

ここで、（複数のスライドの）まったく新しいアニメーションを開始する前に、その変数を確認してください。スライドが現在アニメーション化されている場合は、アニメーション関数をグローバル関数キューに追加します。そうでない場合は、先に進んで通常のようにアニメーションを実行します。

if ($(this).attr('name') == 'home') {
    if (animationsRunning < 1) {
        animation('home', 'top');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['home', 'top']));
    }
}
else if ($(this).attr('name') == 'about') {
    if (animationsRunning < 1) {
        animation('about', 'left');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['about', 'left']));
    }
}

else if ($(this).attr('name') == 'services') {
    if (animationsRunning < 1) {
        animation('services', 'hslide');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['services', 'hslide']));
    }
}

すべてのスライドのアニメーションが終了するたびに、グローバル関数キューにアイテムがあるかどうかを確認してください。ある場合は、最初のものを実行します。

if (animationsRunning < 1 && funqueue.length > 0) {
    (funqueue.shift())();
}

関数キューに関連するコードを以下に示します。

// Function wrapping code.
// fn - reference to function.
// context - what you want "this" to be.
// params - array of parameters to pass to function.
var wrapFunction = function(fn, context, params) {
    return function() {
        fn.apply(context, params);
    };
};

// Global function queue
var funqueue = [];

ここでのStackOverflowの質問には、グローバル関数キューの概念が非常によく説明されているため、ここでは詳しく説明しません。

実用的なjsfiddleの例はここにあります。

編集：

待機中のアニメーションの蓄積を防ぎたい場合があります。その場合は、最新のアイテムを追加する前に、関数キューをクリアするだけです。もちろん、この場合、実際にはキューは必要ありませんが、最初のソリューションと互換性を持たせるために、そのままにしておきます。

更新されたjsFiddleはここにあります。

于 2012-07-10T17:04:58.070 に答える