본문 바로가기

jQuery

CSS transition 완료 후 이벤트 처리 움직이는 UI 동작에는 jQuery 에서 제공하는 animate()와 같은 메소드를 자주 쓰게 되지만 웹,모바일을 막론하고 퍼포먼스 측면에선 CSS 애니메니션 속성이 조금 더 유리할 수 밖에 없습니다. 그래서 디바이스,브라우저 호환성을 고려한 CSS의 transition과 같은 애니메니션 속성을 선호하는데 여기서 CSS transition 애니메이션의 종료 시점(콜백)에 이벤트가 실행되어야 할 경우, 구글링해보면 벤더별로 지원 가능한 jQuery 함수를 만날 수 있습니다. transition 속성의 종료 시점을 체크해 콜백하는 함수입니다. https://gist.github.com/ifthenelse/5433230 // addClass CSS 트랜지션 효과 후 실행 함수 function whichTran.. 더보기
iOS checkbox 스위치 UI 마크업 하이브리드앱 웹뷰 마크업 진행 중 iOS UI 형태의 Checkbox on,off 스위치가 필요해 찾아 보니 Pure CSS 형태 또는 JS 스위치 동작이 목표 디바이스에서 만족스럽지 못해 직접 마크업 해봅니다. 미리보기 마크업 방향 - 모바일 환경 최적화를 위해 가능한 모든 효과는 CSS를 사용- JS는 addClass(), removeClass() 정도만 사용- click, touch 이벤트 (접근성 저하요인 밀기 동작은 제외)- 아이폰 4,5,6 과 안드로이드 4.x 버전 이상 디바이스 지원 시작padding, margin 에 영향을 받지 않도록 box-sizing 속성을 지정합니다.-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-.. 더보기