1

tl;dr - >マウスオーバー時のスプライトアニメーション（完了）、マウスリーブ時のアニメーションの巻き戻し（完了）、アニメーションの再生中のホバーの無効化（解決が必要） -私と一緒にFIDDLE

私のメニューにはかなり具体的な問題があり、javascript の知識はせいぜい限られているので、あなたが助けてくれると思いました。ユーザーがカーソルを合わせている間にアニメーションを再生し、マウスがボタンから離れたときに元の状態に戻りたいと考えていました。スプライトと呼ばれるスクリプトの助けを借りてこれを機能させたときに、ユーザビリティの問題に遭遇しました.

コードは、アニメーションの再生中でも複数のマウスオーバーを登録します。これにより、アニメーションが特定のフレームでフリーズするという奇妙な動作が発生します。

これはhoverIntent、ユーザーの意図を推測しようと.hoverし、一定間隔でマウスを一定量のピクセルだけ動かした場合にのみ を呼び出すスクリプトです。これは特定のバグには問題なく機能しますが、インタラクティブ性が失われ、アニメーションの目的が失われます。

1000ms から 1ms までカウントダウンする変数を考え、関数をこの変数に結び付けましたが、惨めに失敗しました。

私は本当にこれが機能することを望んでいるので、ハイブマインド、あなたに頼ります。一言で言えば、アニメーションが終了するまで、.hover約 1 秒間 ( )ボタンを登録しないようにしたいと考えています。endAnimationDelayどのルートに行くべきかアドバイスやアドバイスをいただければ幸いです。

jQuery(document).ready(function ($) {
var fps = 25;
var playFrames = 25;
var frames = 25;
var endAnimationDelay = ((fps / playFrames) * 1000);

    function playAnimationAbout() {
        $('#about').sprite({
            fps: fps,
            no_of_frames: frames,
            play_frames: playFrames
        });
    }

    function playAnimationAboutBack() {
        $('#about').sprite({
            fps: fps,
            no_of_frames: frames,
            play_frames: playFrames,
            rewind: true
        });
        setTimeout(function () {
            $('#about').destroy();
        }, endAnimationDelay);
    }

$('#about').hoverIntent(playAnimationAbout, playAnimationAboutBack);

});
4

1 に答える 1

0

アニメーションが再生されているかどうか、またはどのフレームで再生されているかを示す一連のクラスを追加および削除することで、修正しました。固定フィドル

jQuery(document).ready(function ($) {
var fps = 25;
var playFrames = 25;
var frames = 25;
var endAnimationDelay = ((fps / playFrames) * 1000);


function playAnimationAbout() {
    if ($('#about').hasClass('playing')) {} else if ($('#about').hasClass('end')) {
        $('#about').sprite({
            fps: fps,
            no_of_frames: frames,
            play_frames: playFrames,
            rewind: true
        });
        $('#about').addClass('playing');
        setTimeout(function () {
            $('#about').destroy();
            $('#about').removeClass('end');
            $('#about').removeClass('playing');
            $('#about').addClass('start');
        }, endAnimationDelay);
    } else {
        if ($('#about').hasClass('start')) {
            $('#about').removeClass('start');
        }
        $('#about').sprite({
            fps: fps,
            no_of_frames: frames,
            play_frames: playFrames
        });

        $('#about').addClass('playing');
        setTimeout(function () {
            $('#about').addClass('end');
            $('#about').removeClass('playing');
        }, endAnimationDelay);
    }
}

function playAnimationAboutBack() {
    if ($('#about').hasClass('playing')) {} else if ($('#about').hasClass('start')) {} else {
        if ($('#about').hasClass('end')) {
            $('#about').removeClass('end');
        }
        $('#about').sprite({
            fps: fps,
            no_of_frames: frames,
            play_frames: playFrames,
            rewind: true
        });
        $('#about').addClass('playing');
        setTimeout(function () {
            $('#about').destroy();
        }, endAnimationDelay);
        setTimeout(function () {
            $('#about').addClass('start');
            $('#about').removeClass('playing');
        }, endAnimationDelay);
    }

}

$('#about').hoverIntent(playAnimationAbout, playAnimationAboutBack); });
于 2013-05-08T14:25:39.183 に答える