Question

我希望当鼠标悬停在精灵上时动画开始，当鼠标离开时动画消失。

我找到了一些最好的解决方案：Why does jQuery spritely animation plays an extra frame on second mouseenter?，但是如果在动画结束之前获得mouseout，那么所有这些解决方案都会完全出现问题。

这是因为“倒带”功能将独立于我离开鼠标时获得9帧

我在考虑下面的解决方案，但它不起作用，我不知道为什么：

$(document).ready(function(e) {

    var frame_width = $('#sprite').width();

    var play_frames = 10;
    $('#sprite').hover(function(){
            $('#sprite').sprite({fps: 10, no_of_frames: 10, play_frames: play_frames});
            play_frames = 9;
        },

    function(){
            var bg_image = $('#sprite').css('background-position');
            bg_image = bg_image.split("px"); 
            bg_image = bg_image[0]; //Gets the sprite width

            remaining_frames = ((bg_image*(-1))/frame_width); //Gets the exact frame the image has stopped at 
            console.log(remaining_frames );
            $('#sprite').sprite({fps: 10, no_of_frames: 10, play_frames: remaining_frames , rewind: true});
        }       
    );
});

Answer 1

我放弃了让它工作并开发了我自己的插件，它被称为“spriteOnHover jQuery插件”，它非常适合在悬停和鼠标事件上制作动画精灵，并且具有几乎所有技巧的超棒参数。当然它是开源的。 jQuery spriteOnHover 默认用法是$('#yourSprite').spriteOnHover();，它指向$('#yourSprite').spriteOnHover({fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false;repeat:true})，我们可以通过大量的变通方法来对鼠标事件进行精灵处理，值得一看，请访问该页面了解更多详情，希望对您有所帮助！ / p>

使用插件“spritely”鼠标悬停在sprite上

1 个答案: