클릭 후 Jquery Sprite 애니메이션을 제거하는 방법

Question

오브젝트를 클릭하면 두 가지 일이 발생합니다 ... 일부 텍스트가있는 div가 나타나고 문자가 짧은 스프라이트 애니메이션을 재생합니다. 그러나 처음으로 재생 한 후에는 스프라이트 애니메이션을 완전히 제거하고 싶습니다. div 텍스트 상자를 클릭하여 계속 토글하고 싶습니다.

이

내가 가진 무엇 :이 시점에서

$(function() { 
$("#chalkboardweare").click(function() { 
    $("#boxweare").animate({width: 'toggle'}, 500); 
      $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50}); 
}); 
}); 

, 당신은 "#chalkboardweare"개체는 "#boxweare"와 "#dude"클릭 할 때마다 전환된다 ...

"#boxweare"div를 클릭 할 때마다 토글해야합니다.

"#dude"div가 처음 클릭 한 후에 만 ​​전환되기를 원합니다.

누군가 나를 도와 줄 수 있습니까?

감사합니다.

Answer 1

.one()을 사용하십시오. 이는 "한 번만 수행"을 의미합니다. 클릭 한 후 (이 경우) 바인딩이 제거되지만 .on() 바인딩은 유지됩니다.

$("#chalkboardweare").one('click', function() { 
    $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50}); 
}).on('click', function() { 
    $("#boxweare").animate({width: 'toggle'}, 500); 
}); 

Answer 2

내 전략은 애니메이션 후 데이터 속성을 #dude에 추가하여 애니메이션을 실행하기 전에 해당 속성의 값을 테스트 할 수 있습니다. 새 코드는 다음과 같습니다.

$(function() { 
    $("#chalkboardweare").click(function() { 
     $("#boxweare").animate({width: 'toggle'}, 500); 
     if (!($("#dude").data("played"))) 
     $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50}).data("played",true); 
    }); 
});