0

積み上げられた一連の画像と、画像の右側に一連の文があります。私のプログラムは次のように動作します: 文の上にカーソルを合わせると、対応する画像がスタックの前面にフェードインし、前の画像がフェードアウトします。onmouseenter と onmouseleave を使用するホバー関数があり、両方で、正しいアニメーション プロセスを実行するためにヘルパー関数が呼び出されます。

私が抱えている問題は、アニメーションが最初の文で実行されているときに別の文にカーソルを合わせると、壊れることです。stop(true, true) を調査し、現在のホバー オーバーでアニメーションが完了するとコールバック関数を作成する可能性がありますが、これらは効果の修正ではありません。

現在の進行が完了するまで、将来のアニメーションをフリーズする方法を知っている人はいますか? 配列キューに追加する必要はありませんが、アニメーションの進行状況を確認するために、フェード呼び出し内にブール変数を設定できます。

考えられる解決策: onHover() の onmouseleave 状態で、setTimeOut を 300 ミリ秒の遅延で呼び出して、デフォルトの img にアクティブなクラスがあるかどうかを確認し、そうでない場合はアニメーション化します (つまり、ユーザーがセンテンス、300ミリ秒後、デフォルトの画像がフェードインします）。この関数に追加して、ユーザーが他の文にカーソルを合わせた場合、次のカーソルのアニメーションを遅らせることができると思います。

私が試したこと

//get rid of intitial page load animation classes
$('#pics img').not($currentCase).not('.active').removeClass('first next-in-line last-in-line');

do {
    $currentCase
    //before this image is faded in, we need to add the next-in-line class so it is stacked right below the top image
        .addClass('next-in-line')
        .fadeIn(fadeSpeed, function () {
            ($(this).removeClass('next-in-line'))
        });
} while ($('#pics img.active').is(':animated'));

$currentCase.addClass('active');
  • 上記は、文の上にホバーを開始するときにスクリプトをフリーズします。

*私の答え: * 同様の問題に遭遇した可能性がある人のために、fadeIn() のコールバック関数で、修正のために以下のコードを使用しました。

$('.active').removeClass('active').hide();
4

1 に答える 1

3

を使用して、画像がまだアニメーション化されているかどうかを確認できます

if($(this).is(':animated'))

一般的な考え方は、何かがまだアニメーション化されているかどうかを確認することです。アニメーション化されている場合は、別のアニメーションを開始しないでください。

于 2012-04-05T15:26:09.977 に答える