본문 바로가기
728x90
300x250
SMALL

javaScript/jQuery148

애니메이션 효과 멈추기 stop $대상.stop() move버튼을 클릭하면 500px만큼 천천히 이동하는데 중간에 stop버튼을 클릭하면 멈추게 된다. 2023. 5. 26.
animate() 사용자 정의 애니메이션 만들기 animate() jQuery에서 기본적으로 제공하는 애니메이션 효과 외에 사용자가 직접 만들어서 사용할 수 있도록 animate()메서드를 제공하고있다. 앞에서 봤던 show(), hide(), fadeIn(), slideUp() 등의 기본 메서드도 내부에는 animate()로 구현되어 있다. $대상.animate(properties, options) $대상.animate(properties[, durateion][, easing][,complete]) animate()를 활용한 사용자 정의 애니메이션 예제 move 버튼을 클릭하면 box요소가 0.5초 동안 오른쪽으로 50px 이동한다. 2023. 5. 25.
애니메이션 progress 옵션 - 비공개 보호되어 있는 글 입니다. 2023. 5. 24.
애니메이션 효과 options 활용 animation 효과에서 options 매개변수 값은 show(), hide(), fadeIn()등 기본효과 메서드에 공통으로 사용할 수 있다. options를 사용하면 기본 효과 메서드 호출 시 리터럴 객체를 이용해서 여러매개변수 값을 하나의매개변수로 묶어 호출 할 수 있다. $대상.기본효과메서드(option) 적용전 $imgs.slideDown(3000, "easeInBounce", function(){ alert("slideDown 완료"); }) 적용후 $imgs.slideDown({ easing:"easeInBounce", duration:3000, complete:function(){ alert("slideDown 완료"); } }) 이렇게 순서에 상관없이 사용가능하다. 이 외에 option.. 2023. 5. 23.
728x90
반응형
LIST