2012-03-06 71 views
0

我正在使用一個名爲http://spritely.net/的插件在Jquery中創建一個動畫精靈。停止在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> 

任何幫助將是巨大的。

謝謝

+0

感激,如果你能創建jsfiddle.net演示,所以我可以用它玩。 – codef0rmer 2012-03-06 10:57:32

+0

我現在就設置它。 – 2012-03-06 10:59:22

+0

好吧,我已經走了一個不同的方法。 http://jsfiddle.net/iamchristill/LeusR/33/我也需要減緩每個「框架」的淡出。 – 2012-03-06 11:32:53

回答

0

這可能會幫助你。

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/