0

マウスがスプライトの上にあるときにアニメーションを開始し、マウスを離すとアニメーションが消えることを望んでいます。

私はいくつかの解決策がこれであることがわかりました：jQueryのスプライトアニメーションが2番目の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 に答える