0

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

我找到了一些最好的解决方案：为什么 jQuery spritely 动画在第二个 mouseenter 上播放额外的帧？，但是如果您在动画结束之前鼠标移出，它们都会完全出现故障。

那是因为“倒带”功能会独立于我离开鼠标时获得 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});
        }       
    );
});
4

1 回答 1

1

我放弃了让它工作并开发了我自己的插件，称为“spriteOnHover jQuery Plugin”，它非常适合在悬停和鼠标事件上为精灵设置动画，并且具有几乎可以完成所有技巧的很棒的参数。当然它是开源的。 jQuery spriteOnHover 默认用法是$('#yourSprite').spriteOnHover();which 指向$('#yourSprite').spriteOnHover({fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false;repeat:true})，我们可以做很多变通方法来处理鼠标事件，这是值得的，访问页面了解更多详细信息，希望对您有所帮助！

于 2012-08-06T15:37:22.063 回答