mouseout에서 리버스 스프라이트 애니메이션

Question

개체 위에 마우스를 올리면 재생할 스프라이트 애니메이션이 있고 마우스가 개체를 떠날 때마다 첫 번째 프레임에서 정지하고 정지합니다.

이 내가 마우스 애니메이션 입력 한 것입니다 : 당신이 배너 위에 마우스를 올려 때이 (프레임 (34)에 완료 될 때까지

기본적으로

$("#banner").mouseenter(function(){ $('#bannerstache').sprite({fps: 200, no_of_frames: 34, play_frames:34}); }); 

, 콧수염은 "성장"을하는 반면, 프레임 1, 콧수염이 없습니다.)

나는이 콧수염을 역방향으로 재생하고 마우스가 공중에 떠있을 때마다 프레임 1로 돌아 가기를 원합니다.

문제는 재생을 되돌릴 수있는 몇 가지 방법을 시도했지만 항상 첫 번째 프레임으로 되돌아 가지 않는다는 것입니다.

어떻게하면됩니까?

입력 해 주셔서 감사합니다. 여기

Answer 1

내가 당신의 문제 설명에서 채찍질 뭔가

HTML :

<div id="div1" class="testContainer"></div> 

CSS :

.testContainer {height:100px;width:150px;background-color:#CCC;text-align:center;font-size:90px}​ 

자바 스크립트 :

// arrSprite would be an array of images 
// each index represents a frame in your sprite 
// for the purposes of this test i'll create an array of integers 
var arrSprite1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

// $div1 is a container within which we'll place our animation 
var $div1 = $('#div1'); 

// create a new SpritePlayer() to handle our animation 
var player = new SpritePlayer($div1, arrSprite1, 100); 

// set the hover in/out event handler of our container. 
$div1.hover(player.forward, player.reverse); 

function SpritePlayer($container, arrSprite, speed) { 
    var int, cur = 0, min = 0, max = arrSprite.length; 

    // give $container the first frame in our sprite (arrSprite) 
    $container.html(getFrame(min)); 

    return { 
     forward: function() { playSprite(true); }, 
     reverse: function() { playSprite(false); } 
    }; 

    function getFrame(i) { return arrSprite[i]; } 

    function playSprite(forward) { 
     var limit = forward ? max : min; 

     clearInterval(int); int = setInterval(function() { 
      $container.html(getFrame(forward ? ++cur : --cur)); 
      cur === limit && clearInterval(int); 
     }, speed); 
    } 
}; 
​ 

Live Demo