禁用 .hover 一段时间答案

【问题标题】：Disable .hover for a set amount of time禁用 .hover 一段时间
【发布时间】：2013-05-07 18:23:46
【问题描述】：

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

我的菜单有一个相当具体的问题，由于我对 javascript 的了解充其量是有限的，所以我认为您可以帮助我。我想在用户将鼠标悬停在动画上时播放动画，并在鼠标离开按钮时让它恢复到原始状态。当我在一个名为 spritely 的脚本的帮助下完成这项工作时，我遇到了一个可用性问题。

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

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

我想到了一个从 1000ms 倒计时到 1ms 的变量，并将函数绑定到这个变量，但惨遭失败。

既然我真的想让这个工作，我求助于你，hivemind。简而言之，我想让按钮在动画完成之前大约一秒钟（endAnimationDelay）内不注册任何.hover。我将不胜感激任何帮助或建议走哪条路线。

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

});

【问题讨论】：

标签： jquery animation hover sprite

【解决方案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); });

【讨论】：