본문 바로가기
728x90
300x250
SMALL

javaScript545

fadeIn fadeOut 서서히 나타나고 사라지는 효과 +ease jQuery의 fadeIn fadeOut 메서드를 이용해서 서서히 사라지고 나타나는 효과 만들기 단, 애니메이션 시간은 3초이고 ease효과 완료후 alert창 띄우기 fadeIn fadeOut 2023. 5. 20.
버튼을 클릭할때마다 애니메이션 효과가 적용된 클래스 추가하기 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Run Effect 참조 : https://jqueryui.com/addClass/ 2023. 5. 18.
클릭하면 이미지가 사라지고 나타나는 애니메이션 효과 show, hide show, hide $대상.show() $대상.show([duration] [,complete]) $대상.show([duration] [,easing] [,complete]) $대상.show([option]) $대상.hide() $대상.hide([duration] [,complete]) $대상.hide([duration] [,easing] [,complete]) $대상.hide([option]) duration : 효과가 지속될 시간 값 easing : 이징함수명 (애니메이션의 움직임의 변화를 구현하는 함수) complete : 효과가 완료됐을 때 호출할 콜백 함수 option : duration, easing, complete매개변수를 하나의 객체로 묶어서 간결하게 매개변수를 전달 할수 있고 기본적인매.. 2023. 5. 17.
드래그 앤 드랍 최종버전 지난 포스팅까지 작업했던 드래그 앤 드랍 이제 거의 완성 한 것 같다. 다 끝난것 같지만 여기에는 치명적인 문제점이 있다. 확인을 위해 mousemove 이벤트에 다음과 같이 콘솔을 찍어보고 실행시켜 콘솔창을 확인해보면 $(document).on("mousemove", function(e){ console.log("mousemove"); }) 이렇게 mousemove 이벤트는 마우스를 대상에 클릭하지 않을때도 실행되는걸 확인할 수 있다. 이 문제를 해결하려면 mousemove와 mouseup 이벤트를 이미지가 드래그되기 시작할때 이벤트 리스너를 등록하고 이미지 드래그가 종료되면 등록한 이벤트 리스너를 삭제하면 된다. 최종버전의 콘솔창을 확인하면 대싱이미지를 클릭한 후에 드래그 했을 경우에만 mousemo.. 2023. 5. 15.
728x90
반응형
LIST