Snap.svg로 두 번째 클릭시 무언가하기

Question

Snap.svg를 클릭하면 애니메이션의 기본 코드를 작성합니다. 이 모양은 다음과 같습니다.

var s = Snap(500, 500); 

var circle = s.rect(100,100,100,100); 

circle.click(function(){ 
    var width = circle.attr('width'); 
    var height = circle.attr('height'); 

    circle.animate({ 
    width: width/2, 
    height :height/2 
    }, 2000); 


}); 

컨테이너의 왼쪽 상단 모서리에 사각형을 만들고 클릭하면 그 너비를 애니메이션으로 나타냅니다. 그런 다음 두 번째 클릭시 다른 것을하고 싶습니다. 예를 들어 원래 상태로 되돌립니다.

나는 또한 자바 스크립트에서이 두 번째 클릭을 어떻게 처리하는지 배우게되어 기쁩니다. 예 :이 버튼을 한 번 누르면 슬라이드 탐색이 열립니다. 두 번 탭하면 탐색이 사라집니다.

미리 감사드립니다.

Answer 1

클릭 상태를 저장하고 싶을 수 있습니다.

이것에 대해 이동하는 방법에는 여러 가지가 있습니다,하지만 난 두를 선택할 수 있습니다 :

은 (말하자면 counter)를 카운터 변수를 만들고 그것에게 click 핸들러가 실행될 때마다 증가. 숫자가 짝수 또는 홀수 인 경우, 때마다, 무엇을 결정하기 위해, 참조 :

var counter = 0; 
circle.click(function(){ 
    if(counter % 2 == 0){ 
    //action1 
    }else{ 
    //action2 
    } 
    counter++; 
}); 

다른 방법으로 수행 할 수있는 작업을 추적 할 때마다 변경 부울을 사용할 수 있습니다.

var flag = true; 
circle.click(function(){ 
    if(flag){ 
    //action1 
    flag = false; 
    }else{ 
    //action2 
    flag = true; 
    } 
}); 

Answer 2

event.detail 속성을 사용하면됩니다. 귀하의 경우에는, 그는 다음과 같습니다 사용자가 더블 클릭을 수행 할 때

circle.click(function(e) { 
    var width = circle.attr('width'); 
    var height = circle.attr('height'); 
    if (e.detail == 1) { 
    circle.animate({ 
     width: width/2, 
     height :height/2 
    }, 2000); 
    } else if (e.detail == 2) { 
    circle.animate({ //example 
     width:width, 
     height:height 
    }, 2000); 
    } 
}); 

이 애니메이션이 다시 원래 크기로 변경 재생하기 (빠른 그래서 배). 당신은 기본적으로 대신 더블에 되 돌리는의, 요소를 전환하려면 요소가 아닌 다른 width 또는 height 스타일을 가지고 있다면, 당신은 간단하게 확인할 수 있습니다 초기 width 또는 height :

circle.click(function(e) { 
    var width = circle.attr('width'); 
    var height = circle.attr('height'); 
    if (parseInt(this.style.width) == parseInt(width) || !this.style.width) { 
    circle.animate({ 
     width: width/2, 
     height :height/2 
    }, 2000); 
    } else { 
    circle.animate({ //example 
     width:width, 
     height:height 
    }, 2000); 
    } 
}); 

는 그 다음 if()는 true를 돌려줍니다 width 속성이 width 스타일과 같거나 width 스타일이 비어 있거나 정의되어 있지 않은 경우