반응형 참고/Jquery26 jquery - stop()/delay() - queue()/dequeue() - clearQueue() 메서드 * 애니메이션 효과 제어 메서드 종류 참고(https://simfairy.tistory.com/108) *stop()/delay() 메서드 // 기본형 ---------------------------------------------- 1. $("요소 선택").stop(); 2. $("요소 선택").stop(clearQueue, finish); ============================================== 1. 진행중(inprogress)인 첫 번째 애니메이션만 정지. 큐에 대기 중인 애니메이션은 계속해서 실행함 2. clearQueue, finish는 true나 false의 값을 입력할 수 있다.(기본값 false) clearQueue가 true면 큐에서 대기 중인 애니메이션 모두.. 2020. 5. 28. jquery - 애니메이션 효과 제어 메서드 개념 *애니메이션 효과 제어 메서드는 - 제어 없이 animate() 메서드를 썼을때 클릭을 난발하면, 클릭을 멈췄음에도 불구하고 눌러진 만큼 계속 실행되는 문제점을 막아준다. *애니메이션 적용 원리와 큐의 개념 애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장됨. 큐는 ATM을 통해 은행 일을 보는 사람이라고 생각하면 쉽다. 일을 보기위해 줄을 서있고 일을 먼저 마친 사람은 먼저 나온다. 큐도 마찬가지로 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행됨. 2020. 5. 28. jquery - 애니메이션(animate)메서드 *애니메이션(animate)메서드 // 기본형 $("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수) 스타일 속성 - 애니메이션으로 적용할 스타일 속성. 적용 시간 - 동작에 반응하는데 소요되는 시간. *예제 // HTML 버튼1 "500px" 이동 버튼2 "500px" 이동 ===================================================== // JQUERY $(function(){ $(".btn1").on("click", function(){ $(".txt1").animate({ marginLeft:"500px", fontSize:"30px" }, 2000, "linear", function(){ alert("모션 완료"); }); }); $.. 2020. 5. 28. jquery - 효과(Effect) 메서드 *효과(Effect) 메서드 효과 소요 시간 가속도 콜백 함수 - 위 3가지를 인자값으로 전달 가능 // 기본형 $("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백 함수); ------------------------------------------------ 1. 효과 소요 시간 - 요소를 숨기거나 노출할 때 소요되는 시간 방법1 : "slow", "normal", "fast" 방법2 : 1,000(1초), 500(0.5초) ------------------------------------------------ 2. 가속도 - 슴기거나 노출하는 동안의 가속도 설정 방법1 : "swing" - 시작과 끝은 느리게, 중간은 빠른 속도로 움직임(기본값) 방법2 : "linear" - 일정한 속도.. 2020. 5. 28. 이전 1 2 3 4 5 ··· 7 다음 반응형
