禁用.hover一段时间

Question

tl; dr - ＆gt;鼠标移动时的精灵动画（完成），鼠标移动时的倒带动画（完成），播放动画时禁用悬停。（需要解决） - FIDDLE with me

我的菜单有一个相当具体的问题，因为我对javascript的了解最多，我认为你可以帮助我。我希望在用户将鼠标悬停在其上时播放动画并让鼠标离开按钮时返回原始状态。虽然我在一个名为spritely的脚本的帮助下工作，但我遇到了一个可用性问题。

即使在播放动画时，代码也会注册多个鼠标悬停。这导致奇怪的行为，其中动画将在某些帧处冻结。

我试图用hoverIntent来解决这个问题，.hover是一个试图猜测用户意图的脚本，如果他在一个间隔内移动鼠标一定数量的像素，则只调用.hover。这适用于某些错误，但会破坏交互性以及动画的目的。

我想到一个变量从1000ms减少到1ms并将函数绑定到这个变量但是失败了。

因为我真的想要这个，所以我转向你，hivemind。简而言之，我希望按钮不会注册任何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); }); ），直到动画结束。任何帮助或建议去哪条路线都会受到我的赞赏。

{{1}}

Answer 1

我通过添加和删除一组类来修复它，这些类指示动画是在播放还是在哪个帧上播放。的 fixed FIDDLE

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); });