Остановка на последнем кадре анимации в Jquery

Question

Я использую плагин под названием http://spritely.net/ для создания анимированного спрайта в Jquery.

Он работает нормально, за исключением того, что мне нужно, чтобы он начинался при наведении мыши и оставался в последнем кадре '8'спрайта, пока мышь не выключена.

Вот код:

 <script type="text/javascript">

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


                            $('#bird')
                                .sprite({
                                    fps: 16, 
                                    no_of_frames: 8,
                                    // the following are optional: new in version 0.6...
                                    start_at_frame: 1,
                                    on_first_frame: function(obj) {
                                        if (window.console) {
                                            console.log('first frame');
                                        }
                                    },
                                    on_last_frame: function(obj) {
                                        // you could stop the sprite here with, e.g.
                                        // obj.spStop();
                                         obj.spStop();
                                    },
                                    on_frame: {
                                        8: function(obj) {
                                            // you could change the 'state' of the
                                            // sprite here with, e.g. obj.spState(2);
                                            if (window.console) {
                                                console.log('frame 8');

                                            }
                                        }
                                    }
                                })








        });
    })(jQuery);

</script>

Любая помощь будет отличной.

Спасибо

Answer 1

Это может помочь вам.

var mouseMoved = false;
    $('#wrapper').hover(
        function() {
            $('#stage1').stop(true, true).fadeIn(1000,function() {
                mouseMoved = false;
                console.log(mouseMoved)
                $('#stage2').fadeIn(1000,function() {console.log(mouseMoved)
                    $('#stage3').fadeIn(1000,function() {console.log(mouseMoved)
                        if (mouseMoved == true) {
                            $('#wrapper div').delay(50).fadeOut();
                        }
                    });
                });
            });
        },
        function() {

        }
    );
    $(document).mousemove(function (event) {
        mouseMoved = true;
        $('#wrapper div').fadeOut();
    });
    ​

см .: http://jsfiddle.net/LeusR/35/