1

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

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

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

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

我想到了一个从 1000ms 倒数到 1ms 的变量，并将函数与这个变量联系起来，但惨遭失败。

既然我真的想让这个工作，我求助于你，hivemind。简而言之，我想让按钮在动画完成之前.hover大约一秒钟（ ）内不注册任何内容。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 回答